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 [...ARGS]

Options

Usage: generate-next-links

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

Options:
 --name      Name of generated TypeScript enum
 --path      Path to folder where 'pages' directory resides
 --out       Path where TypeScript file will be written to
 --dry       Perform all operations except writing to disk
 --verbose   Show all log messages in stdout
 --help      Show help
 --version   Show version number

---

Description

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

pages
  ├── admin
  │   ├── blog
  │   │   ├── index.tsx
  │   │   └── post.tsx
  │   ├── index.tsx
  │   └── user
  │       └── [id].tsx
  ├── _app.tsx
  ├── faq
  │   └── [language].tsx
  ├── index.tsx
  └── products
      ├── [category]
      │   ├── index.tsx
      │   └── theme
      │       ├── color
      │       │   └── [colorId].tsx
      │       ├── current.tsx
      │       └── new.tsx
      ├── create
      │   └── index.tsx
      ├── edit.tsx
      └── [id].tsx

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

export enum links {
  ADMIN = "/admin",
  ADMIN_BLOG = "/admin/blog",
  ADMIN_BLOG_POST = "/admin/blog/post",
  ADMIN_USER_ID = "/admin/user/[id]",
  FAQ_LANGUAGE = "/faq/[language]",
  PRODUCTS_CATEGORY = "/products/[category]",
  PRODUCTS_CATEGORY_THEME_COLOR_COLOR_ID = "/products/[category]/theme/color/[colorId]",
  PRODUCTS_CATEGORY_THEME_CURRENT = "/products/[category]/theme/current",
  PRODUCTS_CATEGORY_THEME_NEW = "/products/[category]/theme/new",
  PRODUCTS_CREATE = "/products/create",
  PRODUCTS_EDIT = "/products/edit",
  PRODUCTS_ID = "/products/[id]",
}

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

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