/generate-next-links

(Not Maintained) Generate typescript enum containing paths to nextjs pages

Primary LanguageTypeScriptMIT LicenseMIT

Coverage Quality Gate Status Lines of Code

I highly recommend checking out this library created by Tate Thurston. It types the standard nextjs Link component by using declaration merging. If you have no need for an exported enum or JSON file, I urge you to use nextjs-routes, as it is superior. I will personally use it going forward.

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]]',
}