generate-next-links

Generate links to nextjs pages

This program generates a file with a TypeScript enum containing pathnames to all pages in a next.js application.

---

Getting Started

Installing

• npm install -g generate-next-links
• generate-next-links [...ARGS]
• or
• npx generate-next-links@latest [...ARGS]

Options

Usage: generate-next-links

If no 'path' is specified, a 'pages' folder must be located
inside the folder where the script is running from

Options:
 -N --name [NAME]         name of generated TypeScript enum               default: links
 -P --path [PATH]         path to folder where 'pages' directory resides  default: cwd
 -O --out  [PATH]         path to folder where ts file will be written to default: cwd
 -B --base [PATH]         define a custom base path to prefix all paths   default: /
 -S --tab-size [INT]      specify tab size used in generated file         default: 4
 -A --api                 include API paths found in '/pages/api' folder
 -R --root                include a root entry with path [BASE]
 -D --dry                 perform all operations except writing to disk
 -V --verbose             show all log messages in stdout
 -T --omit-timestamp      omit timestamp from written ts file
 -J --export-json         export json instead of ts enum
 -C --convert-camel-case  convert camel case to be delimited by underscore
 -E --convert-hyphens     convert kebab case to be delimited by underscore
 -Q --single-quote        use single quotes in the generated file
 -I --version             show current version
 -H --help                show help

---

Description

Suppose a next.js application with the following pages structure:

.
└── pages
    ├── 404.tsx
    ├── 500.tsx
    ├── admin
    │   ├── administrate.tsx
    │   ├── index.tsx
    │   └── user
    │       ├── index.tsx
    │       └── options
    │           └── dashboard.tsx
    ├── _app.tsx
    ├── content
    │   ├── [articleId]
    │   │   └── index.tsx
    │   └── index.tsx
    ├── _document.tsx
    ├── index.tsx
    ├── posts
    │   └── [...slug].tsx
    └── user
        └── [[...slug]].tsx

[...slug] and [[...slug]] are catch-all-routes

Given the above structure, this program will generate a .ts file with the following enum:

export enum links {
    N404 = '/404',
    N500 = '/500',
    ADMIN = '/admin',
    ADMIN_ADMINISTRATE = '/admin/administrate',
    ADMIN_USER = '/admin/user',
    ADMIN_USER_OPTIONS_DASHBOARD = '/admin/user/options/dashboard',
    CONTENT = '/content',
    CONTENT_ARTICLEID = '/content/[articleId]',
    POSTS_CATCHALL_SLUG = '/posts/[...slug]',
    USER_OPTIONAL_CATCHALL_SLUG = '/user/[[...slug]]',
}

The dynamic paths can easily be used in conjunction with next/link

function component (props) {
  return (
    <Link
      href={{
        pathname: links.CONTENT_ARTICLEID,
        query: {
          articleId: props.id
        },
      }}
    >
  )
}

Or with another library such as cl-fill-link

// returns: '/posts/category/music/jazz/miles-davis'
fillLink(links.POSTS_CATCHALL_SLUG, {
    slug: ['category', 'music', 'jazz', 'miles-davis'],
});

Suppose the following api folder is present in the above example

.
└── pages
    ├── api
        ├── article
        │   └── create.ts
        ├── auth
        │   ├── login.ts
        │   └── logout.ts
        └── user
            └── [[...userId]].ts

Run the program with the --api flag to produce the following:

export enum links {
    N404 = '/404',
    N500 = '/500',
    ADMIN = '/admin',
    ADMIN_ADMINISTRATE = '/admin/administrate',
    ADMIN_USER = '/admin/user',
    ADMIN_USER_OPTIONS_DASHBOARD = '/admin/user/options/dashboard',
    API_ARTICLE_CREATE = '/api/article/create',
    API_AUTH_LOGIN = '/api/auth/login',
    API_AUTH_LOGOUT = '/api/auth/logout',
    API_USER_OPTIONAL_CATCHALL_USERID = '/api/user/[[...userId]]',
    CONTENT = '/content',
    CONTENT_ARTICLEID = '/content/[articleId]',
    POSTS_CATCHALL_SLUG = '/posts/[...slug]',
    USER_OPTIONAL_CATCHALL_SLUG = '/user/[[...slug]]',
}