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

First, let's create a new Nextjs project `my-ts-app`

```sh
# 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
![Screenshot 2020-08-11 at 9.27.23 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1597118258140/vHrzuFzV7.png)

---

Your package.json file
![Screenshot 2020-08-11 at 9.25.30 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1597118192917/ZzMlU4dd6.png)

---

Add the following scripts to your `package.json`

```
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}
```

![Screenshot 2020-08-11 at 9.25.46 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1597118194308/QC6DQR1K2.png)

---

Add the following to your `pages/index.tsx` file

```js
// pages/index.tsx

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage
```

---

Now, let's add typescript to the project.

```sh
# 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.


![Screenshot 2020-08-11 at 9.35.40 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1597118753075/iPICU_Y0D.png)


![Screenshot 2020-08-11 at 9.43.10 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1597119206221/gYZYSt7Vm.png)

Open [localhost:3000](http://localhost:3000) in your browser

![Screenshot 2020-08-11 at 9.44.54 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1597119304712/rGMU7Vb-w.png)

---

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

> If you have any feedback or suggestions to improve the blog post, please leave them in the comments. I will try to improve the post accordingly. 

> If this blog post was helpful to you, please consider liking it and sharing it so that it reaches more people. 

> If you want to get notified as soon as I write a new blog post, you can click on **Subscribe** button at the top of this page. You can also follow me here at @[Bhanu Teja P](@pbteja1998) or on twitter at [@pbteja1998](https://twitter.com/pbteja1998) to get updated.

%%[newsletter]