Setup Next JS with Typescript integration

4 min readJun 29, 2019

This guide will walk you through how to set up the Next JS with Typescript integration for your projects.

Step 1: Set Up Your Next JS Project

Create a new folder name nextjs-typescript and cd nextjs-typescript

mkdir nextjs=typescript && cd nextjs=typescript

Now create package.json using command yarn init --yes or npm init --yes

yarn init --yes

Install the required dependencies from your terminal:

yarn add next react react-dom

Step 2: Install required @types module

That @types/ prefix means that we also want to get the declaration files for React and React-DOM. Usually when you import a path like “react”, it will look inside of the react package itself; however, not all packages include declaration files, so TypeScript also looks in the @types/react package as well.

Next JS has official @zeit/next-typescript module

yarn add @zeit/next-typescript @types/next @types/react @zeit/next-typescript @types/next @types/react

Step 3: Create configureation files

Create a next.config.js in your project

// next.config.js
const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript()

Create a .babelrc in your project

{
  "presets": ["next/babel", "@zeit/next-typescript/babel"]
}

Create a tsconfig.json in your project

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "lib": ["dom", "es2017"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext"
  }
}

Optionally you can add your custom Next.js configuration as parameter

// next.config.js
const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript({
  webpack(config, options) {
    return config
  }
})

The next step in this set up is to add a scripts property to the package.json file that was generated in the installation above. The property will include a script to run a local server for development of your project:

{
  ...
  "scripts": {
    "dev": "next"
  }
}

Step 4: Create Shared layout

Create a common Layout component and use it in multiple pages.

Create new components directory and then within that directory, create an Layout.tsx with the following contents:

import * as React from 'react'
import Link from 'next/link'
import Head from 'next/head'type LayoutProps = {
  title?: string
}const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
}const Layout: React.FunctionComponent<LayoutProps> = ({ children, title }) => (
  <div style={layoutStyle}>
    <Head>
      <title>{title}</title>
      <meta charSet="utf-8" />
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    </Head>
    <header>
      <nav>
        <Link href="/">
          <a>Home</a>
        </Link>{' '}
        |{' '}
        <Link href="/about">
          <a>About</a>
        </Link>{' '}
        |{' '}
      </nav>
    </header>
    {children}
  </div>
)export default Layout

Step 5: Create Pages Layout

Create new pages directory and then within that directory, create an index.tsx,about.tsx,post.tsx with the following contents:

import React from 'react'
import Layout from '../components/Layout'const Index: React.FunctionComponent = () => {
  return (
    <Layout title="Home">
      <h1>Hello Next.js 👋</h1>
    </Layout>
  )
}export default Index

index.tsx

import React from 'react'
import Layout from '../components/Layout'
import Link from 'next/link'type PostLinkProps = {
  title?: string
}const PostLink: React.FunctionComponent<PostLinkProps> = ({ title }) => {
  return (
    <li>
      <Link href={`/post?title=${title}`}>
        <a>{title}</a>
      </Link>
    </li>
  )
}const About: React.FunctionComponent = () => {
  return (
    <Layout title="About">
      <h1>This is About page ✌</h1>
      <PostLink title="Hello Next.js" />
      <PostLink title="Learn Next.js is awesome" />
      <PostLink title="Deploy apps with Zeit" />
    </Layout>
  )
}export default About

about.tsx

import { withRouter } from 'next/router'
import Layout from '../components/Layout'type PostProps = {
  router?: any
}const Post: React.FunctionComponent<PostProps> = ({ router }) => {
  return (
    <Layout>
      <h1>{router.query.title}</h1>
      <p>This is the blog post content.</p>
    </Layout>
  )
}export default withRouter(Post)

post.tsx

Step 6: Deploy Your Next.js Project with Now

With your Next.js project set up, you are ready to deploy your app with Now.

If you have not yet installed Now, you can do so by installing the Now Desktop app which installs Now CLI automatically, or by installing Now CLI directly.

module.exports = withTypescript({
  target: 'serverless',
  webpack: (config, options) => {
    config.plugins = config.plugins || []
    return config
  }
})

Setting the Next.js build target to “serverless” to enable serverless builds.

Serverless Next.js is more performant and provides more stability on serverless platforms, such as Now.

Next, you will need to tell Now what the entrypoint is for the application and what Builder it should use to build and deploy the application so it will act as you would expect.

You will need to create a now.json configuration file to instruct Now on how to handle your application in the build phase and when being served to visitors.

{
  "version": 2,
  "name": "my-nextjs-app",
  "builds": [{ "src": "next.config.js", "use": "@now/next" }]
}

To ensure a fresh build of your Next.js project gets built by Now, especially if you only deploy the source code, you can add a now-build script to your package.json file:

{
  ...
  "scripts": {
    ...
    "now-build": "next build"
  }
}

If you like this article share and clap 👏 👏. Thanks!