[updated] version 1.1.0 is out. Remove next-routes. Based on https://github.com/zeit/next.js#routing
I create a template for Next.js and TypeScript.
ryohlan
/
next-ts-template
Template for Next.js using parameterized typed routing
Next.js 9 is out!!
This version includes official dynamic routing using file system.
So, you may not need this repository. See this.
https://nextjs.org/blog/next-9#dynamic-route-segments
Next.js TypeScript project template
Requirement
node > 10.12.0
What is this?
This is a template for Next.js. This. template includes followings:
- TypeScript
- Parameterized routing
- custom server
- styled-components
- cli for new page
This project provides a cli for creating new page. For example, if you want to add a new page named profile, run npm run new:page profile commands:
npm run new:page profile
create new page
path: /next-ts-template/pages/profile/index.tsx
create new controller
path: /next-ts-template/controllers/profile/index.tsx
create new layout
path: /next-ts-template/layouts/profile/index.tsx
update pattern.json
pattern: { page: '/profile', pattern: '/profile' }
update createRoute.ts
export const profile = () => ({
as: `/profile`
href: `/profile`
})The command creates 3 files and updates 2 file.
Page
After the cli ran, a file…
Next.js is a great framework. But it has no parameterized routing function. I often need it.
So, I create a project template and template generator CLI.
The big feature of it is to provide parameterized routing automatically.
For example, if we need 'users/:user_id' routing, run following:
npm run new:page users/:user_id
create new page
path: /{PROJECT_PATH}/next-ts-template/pages/users/show.tsx
create new controller
path: /{PROJECT_PATH}/next-ts-template/controllers/users/show.tsx
create new layout
path: /{PROJECT_PATH}/next-ts-template/layouts/users/show.tsx
create new routes
pattern:
page: 'users/show',
pattern: '/users/:user_id' }
Then, we can access '/users/100'. And the query parameter type is defined automatically at the controller file.
// /controllers/users/show
import React from 'react'
import { NextContext } from 'next'
import { AppInitialProps, AppProps } from '@src/app'
import Layout from '@layouts/users/show'
interface InitialProps {}
type Query = {
user_id: string
}
const getInitialProps = async ({
}: NextContext<Query> & AppInitialProps): Promise<InitialProps> => {
return {}
}
const Page = ({ }: AppProps & InitialProps) => <Layout />
Page.getInitialProps = getInitialProps
export default Page
Also multiple query parameters are ok.
npm run new:page users/:user_id/items/:item_id
create new page
path: /{PROJECT_PATH}/next-ts-template/pages/users/items/show.tsx
create new controller
path: /{PROJECT_PATH}/next-ts-template/controllers/users/items/show.tsx
create new layout
path: /{PROJECT_PATH}/next-ts-template/layouts/users/items/show.tsx
create new routes
pattern: {
page: 'users/items/show',
pattern: '/users/:user_id/items/:item_id' }
// users/items/show.tsx
...
type Query = {
user_id: string,
item_id: string
}
...
And you can create parameterized props for the Link component safely.
export const users_items_show = ({
user_id,
item_id
}: {
user_id: string
item_id: string
}) => ({
as: `/users/${user_id}/items/${item_id}`,
href: `/users/items/show?user_id=${user_id}&item_id=${item_id}`
})
Also users_items_show is created at the same time.
<Link {...users_items_show({ user_id: '2', item_id: '300' })} >
...
Top comments (7)
Many hours of searching and at last someone had a default
_document.tsxfile to reference which allowed me to go on and fix the errors in my_app.tsxfile. I love next but their examples can be horribly spare. No where did it mention there were interfaces forDefaultDocumentIProps,NextDocumentContext,DefaultAppIProps,NextAppContext.I'm in the middle of converting a rather large codebase to typescript so much appreciated. :)
See github.com/zeit/next.js#routing under "custom routes"
Hi, Tim. Thank you for great framework 'Next.js'!
I know it. I have written codes following those steps before.
But I created this template because I want to automation those processings.
I realized that the next-routes don't need to this project necessarily...
v1.1.0 is out. Removed next-routes!
github.com/ryohlan/next-ts-template
You should also check out Isomorphic React + TypeScript on Now 2.0 from one of the devs at Zeit.
Thanks for your comment. I'll check it.