如何在 Next.js 中查找未使用的文件？

在本文中，我们将学习如何在 NextJS 项目中找到未使用的文件。 NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。动态路径的链接有助于有条件地渲染 NextJS 组件。

方法：首先要找到未使用的文件，我们将在项目的根目录中创建 2 个新的 javascript 文件。之后，我们将一个文件导入到我们的 index.js 文件中，然后我们将安装并运行下一个未使用的模块来检查未使用的文件，

创建 NextJS 应用程序：

第 1 步：您可以使用以下命令创建一个新的 NextJs 项目：

npx create-next-app gfg

项目结构：它看起来像这样。

未使用的文件：您可以使用下一个未使用的模块在 NextJs 中轻松找到未使用的文件。首先，我们将在项目的根目录中创建一个名为“component”的新文件夹，在此文件夹中，我们将创建两个名为“unused1”和“used1”的新文件。然后我们将在我们的文件中添加以下内容。

第 2 步：在我们项目的根目录中创建一个名为used.js的新文件，并在该文件中创建一个名为 Unused() 的新函数。

import React from 'react'
  
export default function Unused() {
    return (
        
            Unused File
        
    )
}

第 3 步：在我们项目的根目录中创建一个名为used.js的新文件，并在该文件中创建一个名为 Used() 的新函数。

import React from 'react'
  
export default function Used() {
    return (
        
            Used File
        
    )
}

第 4 步：在这一步中，我们会将 Used.js 文件导入Index.js文件。然后我们将创建一个名为 Home 的函数，并在其中调用 Used 组件。

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 (
    
      
    
  )
}

在这里，我们正在导入我们的 used1.js 文件。

第 5 步：现在要在我们的项目中找到未使用的文件，我们将使用以下命令安装一个名为“next-unused”的模块：-

npm i next-unused

第 6 步：现在我们将在 package.json 文件中添加下一个未使用模块的脚本和属性。

添加脚本：

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

添加属性：

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

运行应用程序的步骤：现在您可以在终端的终端命令中使用以下命令运行模块。

npm run find:unused

如何在 Next.js 中查找未使用的文件？

添加脚本：

添加属性：

输出：