Eslint-plugin-next-route-params NPM

eslint-plugin-next-route-params

This ESLint plugin ensures that only the correct parameters are used in Next.js routes based on the file-based routing system. This is particularly useful in Next.js applications where route parameters are predefined and should be enforced at compile-time.

Installation

To use this plugin, you need to have ESLint installed. You can install ESLint and the plugin using npm or yarn:

npm install eslint eslint-plugin-next-route-params --save-dev
# or
yarn add eslint eslint-plugin-next-route-params --dev

Usage

Add next-route-params to the plugins section of your ESLint configuration file (e.g., .eslintrc.json):

{
  "plugins": ["next-route-params"],
  "rules": {
    "next-route-params/enforce-route-params": "error"
  }
}

Rule Details

The next-route-params/enforce-route-params rule checks that only the correct parameters are used in your Next.js routes. This rule uses the file-based routing system of Next.js to determine the allowed parameters for each route.

🔧 Automatically fixable by the --fix CLI option.

Name	Description	🔧
enforce-route-params	enforce correct route parameters built by Next.js' file based routes	🔧

Options

This rule does not take any options.

Examples

Given the following file structure:

app/
├── home
│   ├ route.tsx
├── blog
│      ├──[id]
│      |    ├──page.tsx
│      └── [category]
│               └── [post]
│                     └──page.tsx

The following are considered warnings/errors:

//app/blog/[id]/page.tsx
export default function Blog({
  params: { id, category },
}: {
  params: {
    id: string;
    category: string;
  };
}) {
  // 'category' is not a valid parameter for this page
  return (
    <div>
      {category}-{id}
    </div>
  );
}

The following are considered correct:

// app/blog/[id]/page.tsx
export default function Blog({ params: { id } }: { params: { id: string } }) {
  // 'id' is a valid parameter for this page
  return <div>{id}</div>;
}