Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Lindeneg/generate-next-links
(Not Maintained) Generate typescript enum containing paths to nextjs pages
https://github.com/Lindeneg/generate-next-links
cli link-generator nextjs react typescript utility
Last synced: 3 months ago
JSON representation
(Not Maintained) Generate typescript enum containing paths to nextjs pages
- Host: GitHub
- URL: https://github.com/Lindeneg/generate-next-links
- Owner: Lindeneg
- License: mit
- Archived: true
- Created: 2021-08-06T18:27:47.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-08T21:19:17.000Z (about 2 years ago)
- Last Synced: 2024-11-04T11:02:31.617Z (3 months ago)
- Topics: cli, link-generator, nextjs, react, typescript, utility
- Language: TypeScript
- Homepage:
- Size: 348 KB
- Stars: 12
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG
- License: LICENSE
Awesome Lists containing this project
README
[](https://sonarcloud.io/summary/new_code?id=Lindeneg_generate-next-links) [](https://sonarcloud.io/summary/new_code?id=Lindeneg_generate-next-links) [](https://sonarcloud.io/summary/new_code?id=Lindeneg_generate-next-links)
*I **highly** recommend checking out [this](https://github.com/tatethurston/nextjs-routes) library created by [Tate Thurston](https://github.com/tatethurston). 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](https://www.typescriptlang.org/) `enum` containing pathnames to all pages in a [next.js](https://nextjs.org/) 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](https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes)_
Given the above structure, this program will generate a `.ts` file with the following `enum`:
```ts
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](https://nextjs.org/docs/api-reference/next/link#with-url-object)
```tsx
function component (props) {
return (
)
}
```
Or with another library such as [cl-fill-link](https://github.com/Lindeneg/cl-fill-link)
```ts
// 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:
```ts
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]]',
}
```