DEV Community

Ryohlan
Ryohlan

Posted on • Edited on

Next.js + TypeScript template

#react #nextjs #typescript

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

Read next

dee_codes profile image

How to Generate and Verify OTPs in Next.js

Hadiza Mohammed -

michelledey4you profile image

Created a Npm package for Vite, React Tailwindcss starter code with configuration.

Plain -

peterlidee profile image

Writing Jest tests for searchParams in Next 15

Peter Jacxsens -

sajaddp profile image

How to Learn TypeScript in One Day?

Sajad DP -