Buy NowGet Update

Structure

root
  ├── public
  ├── src
      ├── types
      ├── assets
      ├── components
      ├── pages OR app
      ├── hooks
      ├── layouts
      ├── sections
      ├── theme
      ├── utils
      ├── routes
      ├── ...
  ├── next.config.js
  ├── package.json
  ├── ...

structure

Remove & Clean

Depending on the needs of each project, there will be components that are not needed.

Below is the order of precedence for deleting components:

Step 1:

Delete unused pages in /pagesor /app.

Example: delete src/pages/contact-us.tsx.

Step 2:

Create file knip.jsonc

knip.jsonc
{
  "$schema": "https://unpkg.com/knip@5/schema-jsonc.json",
  "paths": {
    "src/*": ["./src/*"],
  },
  "project": ["src/**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}"],
  "ignoreExportsUsedInFile": true,
  "ignoreDependencies": [
    // ignore dependencies
    "@fontsource.+",
  ],
  "ignore": [
    // ignore folders or files
    "src/_mock/**",
  ],
}

Step 3:

Find and delete related files.

Run:
npx knip

Result:
Unused dependencies (10)
@emotion/styled               package.json
@fullcalendar/core            package.json
@tiptap/core                  package.json
@tiptap/extension-code-block  package.json
@tiptap/pm                    package.json
apexcharts                    package.json
embla-carousel                package.json
mapbox-gl                     package.json
react-dom                     package.json
stylis                        package.json
Unused devDependencies (1)
eslint  package.json
Unlisted binaries (3)
eslint    package.json
next      package.json
prettier  package.json
Configuration hints (3)
Reference: