Related Posts
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](https://cdn.feather.blog?src=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%3A%252F%252Fcdn.hashnode.com%252Fres%252Fhashnode%252Fimage%252Fupload%252Fv1597118258140%252FvHrzuFzV7.png%3Ftable%3Dblock%26id%3Da5c83fc6-2818-49aa-8737-a947ffb58c43%26cache%3Dv2&optimizer=image&quality=80&width=280)
Your package.json file
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%3A%252F%252Fcdn.hashnode.com%252Fres%252Fhashnode%252Fimage%252Fupload%252Fv1597118192917%252FZzMlU4dd6.png%3Ftable%3Dblock%26id%3D50d23ecf-7b85-4e9a-8449-61b13896e75e%26cache%3Dv2&optimizer=image&quality=80&width=280)
Add the following scripts to your
package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%3A%252F%252Fcdn.hashnode.com%252Fres%252Fhashnode%252Fimage%252Fupload%252Fv1597118194308%252FQC6DQR1K2.png%3Ftable%3Dblock%26id%3D997634c4-dd60-44eb-92eb-128a0ebe03ed%26cache%3Dv2&optimizer=image&quality=80&width=280)
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](https://cdn.feather.blog?src=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%3A%252F%252Fcdn.hashnode.com%252Fres%252Fhashnode%252Fimage%252Fupload%252Fv1597118753075%252FiPICU_Y0D.png%3Ftable%3Dblock%26id%3D67e34485-c18f-4979-b651-eef8c5d8863c%26cache%3Dv2&optimizer=image&quality=80&width=280)
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%3A%252F%252Fcdn.hashnode.com%252Fres%252Fhashnode%252Fimage%252Fupload%252Fv1597119206221%252FgYZYSt7Vm.png%3Ftable%3Dblock%26id%3Da96fea93-dab0-44f7-97c3-37503da4521e%26cache%3Dv2&optimizer=image&quality=80&width=280)
Open localhost:3000 in your browser
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%3A%252F%252Fcdn.hashnode.com%252Fres%252Fhashnode%252Fimage%252Fupload%252Fv1597119304712%252FrGMU7Vb-w.png%3Ftable%3Dblock%26id%3D13b7c13a-08ab-486b-9b00-6d1f6d5527b1%26cache%3Dv2&optimizer=image&quality=80&width=280)
Now, you can add types to your project as you normally would to any typescript project.
![Bhanu Teja P](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F8f3aa935-faa2-4469-92ad-cd0c5375f762%252Fe422ebf5-196d-4001-84cb-a208da3a6cbc%252Fbhanu.png&optimizer=image&quality=80&width=280)
Written by
24yo developer and blogger. I quit my software dev job to make it as an independent maker. I write about bootsrapping Feather.