¿Cómo encontrar archivos no utilizados en Next.js?

En este artículo, aprenderemos cómo podemos encontrar archivos no utilizados en nuestro proyecto NextJS. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac. La vinculación de rutas dinámicas ayuda a representar sus componentes NextJS de forma condicional.

Enfoque: para encontrar el archivo no utilizado primero, crearemos 2 nuevos archivos javascript en la raíz de nuestro proyecto. Después de eso, importaremos un archivo a nuestro archivo index.js, luego instalaremos y ejecutaremos el siguiente módulo no utilizado para verificar el archivo no utilizado,

Crear aplicación NextJS:

Paso 1: puede crear un nuevo proyecto NextJs usando el siguiente comando:

npx create-next-app gfg

Estructura del proyecto: Se verá así.

Archivos no utilizados: puede encontrar fácilmente archivos no utilizados en NextJs utilizando el siguiente módulo no utilizado. Para esto primero, crearemos una nueva carpeta llamada ‘componente’ dentro de la raíz del proyecto y dentro de esta carpeta, crearemos dos nuevos archivos llamados ‘unused1’ y ‘used1’. Luego agregaremos el siguiente contenido en nuestros archivos.

Paso 2: Crear un nuevo archivo llamado unused.js en la raíz de nuestro proyecto y dentro de ese archivo crear una nueva función llamada Unused().

import React from 'react'
  
export default function Unused() {
    return (
        <div>
            Unused File
        </div>
    )
}

Paso 3: Crear un nuevo archivo llamado used.js en la raíz de nuestro proyecto y dentro de ese archivo crear una nueva función llamada Used().

import React from 'react'
  
export default function Used() {
    return (
        <div>
            Used File
        </div>
    )
}

Paso 4: en este paso, importaremos nuestro archivo Used.js a nuestro archivo Index.js . Luego crearemos una función con el nombre Inicio y dentro de eso, llamaremos a nuestro componente Usado.

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import Used from '../component/used1'
  
export default function Home() {
  return (
    <div className={styles.container}>
      <Used/>
    </div>
  )
}

Aquí estamos importando nuestro archivo used1.js. 

Paso 5: Ahora, para encontrar archivos no utilizados en nuestro proyecto, vamos a instalar un nombre de módulo ‘siguiente no utilizado’ usando el siguiente comando:

npm i next-unused

Paso 6: ahora agregaremos el script y la propiedad para nuestro próximo módulo no utilizado en nuestro archivo package.json.

Añadir guión:

"scripts": {
  "find:unused": "next-unused"
}

Agregar propiedad:

{
 "next-unused": {
   "alias": {},
   "include": ["component"],
   "exclude": [],
   "entrypoints": []
 }
}

Paso para ejecutar la aplicación: ahora puede ejecutar el módulo usando el siguiente comando en el comando de terminal en el terminal.

npm run find:unused

Producción: