generate-next-routes

Generates a routes.js file containing the available routes in /pages folder in Next.js project.

Install

npm install --save-dev generate-next-routes

or

yarn add -D generate-next-routes

Generation

Add generate-next-routes as a script to package.json (not necessary when using yarn)

"scripts": {
  /* existing scripts */
  "generate-next-routes": "generate-next-routes"
}

Run command

npm run generate-next-routes

or

yarn generate-next-routes

Usage

Old way

<Link href="/about-us">
  About us
</Link>

New way

import { routes } from '../routes'; // path can be aliased in your jsconfig for easier imports

<Link href={routes.aboutUs}>
  About us
</Link>

How to implement path alias

Stucture of routes.js file

Given a directory structured like this:

pages
├── news
│   └── articles
│       └── [article]
│           ├── edit.js
│           └── index.js
├── user
│   └── [user].js
├── _app.js
├── about-us.js
├── blog.js
└── index.js

Generates a routes.js file that looks like this:

export const routes = {
  _app: '/_app',
  aboutUs: '/about-us',
  blog: '/blog',
  home: '/',
  news: {
    articles: {
      article: {
        edit: {
          getRoute: (article) => `/news/articles/${article}/edit}`
        },
        home: {
          getRoute: (article) => `/news/articles/${article}}`
        }
      },
      home: '/news/articles'
    }
  },
  user: { user: { getRoute: (user) => `/user/${user}}` } }
}