Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yarnaimo/next-typed-pages
Type safe path utility for Next.js
https://github.com/yarnaimo/next-typed-pages
nextjs typescript
Last synced: 3 months ago
JSON representation
Type safe path utility for Next.js
- Host: GitHub
- URL: https://github.com/yarnaimo/next-typed-pages
- Owner: yarnaimo
- License: mit
- Created: 2020-10-22T08:43:43.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-04-22T08:58:26.000Z (over 2 years ago)
- Last Synced: 2024-10-09T16:16:30.653Z (3 months ago)
- Topics: nextjs, typescript
- Language: TypeScript
- Homepage:
- Size: 346 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# next-typed-pages
> Type safe path utility for Next.js
## Install
```sh
yarn add next-typed-pages
# or
npm i -S next-typed-pages
```
## Example
1. Files in `pages` directory
```
- pages/
- about.tsx
- users/
- index.tsx
- [userId]/
- index.tsx
- posts/
- [postId]/
- index.tsx
- settings
- index.tsx
- lang.tsx
```
2. Execute command
```sh
next-typed-pages generate src/next-pages.ts
```
3. Generated file content (src/next-pages.ts)
```ts
import { $route, nextPages } from 'next-typed-pages'
export const pages = nextPages({
about: $route,
users: {
index: $route,
'[userId]': {
index: $route,
posts: {
'[postId]': {
index: $route,
},
},
settings: {
index: $route,
lang: $route,
},
},
},
})
```
4. Generate route paths type-safely
```ts
pages.index // => '/'
pages.about // => '/about'
pages.users.index // => '/users'
pages.users(null).index // => '/users/[userId]'
pages.users('123').index // => '/users/123'
pages.users('123').posts('456').index // => '/users/123/posts/456'
pages.users('123').settings.index // => '/users/123/settings'
pages.users('123').settings.lang // => '/users/123/settings/lang'
```
## CLI Options
- `--dir`, `-d` : Path to pages directory (default: src/pages)