Add Typescript to your Next.js project

It’s very easy to add typescript to a Next.js project. In this post, I will list out steps on how to do so.

It’s very easy to add typescript to a Next.js project. In this post, I will list out steps on how to do so.
First, let’s create a new Nextjs project my-ts-app
# Create a directory with name `my-ts-app`
mkdir my-ts-app

# Change directory to `my-ts-app`
cd my-ts-app

# Initialize the directory as an npm project
npm init -y

# Install `next`, `react` and `react-dom` as dependencies
npm install next react react-dom

# Create a directory with name `pages`
mkdir pages

# Create a file with name `index.tsx` inside `pages` directory
touch pages/index.tsx

File Structure
notion image

Your package.json file
notion image

Add the following scripts to your package.json
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}
notion image
Screenshot 2020-08-11 at 9.25.46 AM.png

Add the following to your pages/index.tsx file
// pages/index.tsx
function HomePage() { 
	return <div>Welcome to Next.js!</div>
}

export default HomePage

Now, let’s add typescript to the project.
# Create an empty `tsconfig.json` file
touch tsconfig.json

# Add `typescript`, `@types/react` and `@types/node` as devDependencies
npm install --save-dev typescript @types/react @types/node
That’s it. Next time you run npm run dev, tsconfig.json will be auto-populated with recommended typescript config for Next.js.
notion image
 
notion image
 
Open localhost:3000 in your browser
notion image
 

Now, you can add types to your project as you normally would to any typescript project.