DEV Community

Ryohlan
Ryohlan

Posted on • Edited on

Next.js + TypeScript template

#typescript #react #nextjs

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

GitHub logo 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` })
Enter fullscreen mode Exit fullscreen mode

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' }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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' }
Enter fullscreen mode Exit fullscreen mode 
// users/items/show.tsx ... type Query = { user_id: string, item_id: string } ...
Enter fullscreen mode Exit fullscreen mode

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}` })
Enter fullscreen mode Exit fullscreen mode

Also users_items_show is created at the same time.

<Link {...users_items_show({ user_id: '2', item_id: '300' })} > ...
Enter fullscreen mode Exit fullscreen mode

Top comments (7)

Collapse
 
mrispoli24 profile image
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. :)

Collapse
 
timneutkens profile image
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"

Collapse
 
ryohlan profile image
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.

Collapse
 
ryohlan profile image
Ryohlan •

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

Thread Thread
 
ryohlan profile image
Ryohlan •

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

Collapse
 
nickytonline profile image
Nick Taylor •

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

Collapse
 
ryohlan profile image
Ryohlan •

Thanks for your comment. I'll check it.