Next.js + TypeScript template

[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…

View on GitHub

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' })} >
...

Comments

[Mike Rispoli]

Many hours of searching and at last someone had a default _document.tsx file to reference which allowed me to go on and fix the errors in my _app.tsx file. I love next but their examples can be horribly spare. No where did it mention there were interfaces for DefaultDocumentIProps, NextDocumentContext, DefaultAppIProps, NextAppContext.

I'm in the middle of converting a rather large codebase to typescript so much appreciated. :)

[Tim Neutkens]

Next.js is a great framework. But it has no parameterized routing function. I often need it.

See github.com/zeit/next.js#routing under "custom routes"

[Ryohlan]

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.

[Ryohlan]

I realized that the next-routes don't need to this project necessarily...

[Ryohlan]

v1.1.0 is out. Removed next-routes!
github.com/ryohlan/next-ts-template

[Nick Taylor]

You should also check out Isomorphic React + TypeScript on Now 2.0 from one of the devs at Zeit.

Steven

@styfle

Isomorphic React + TypeScript on @zeithq Now 2.0

github.com/styfle/react-s…

17:52 PM - 09 Feb 2019

1054

[Ryohlan]

Thanks for your comment. I'll check it.