How to Set Up Next.js With TypeScript
Tags: react, typescript, tutorial, javascript
Published: 2020-09-18 06:47:23

If you start a new React project, you might want to consider [Next.js](https://nextjs.org/) and [TypeScript](https://www.typescriptlang.org/). In this article, I explain why this would be a great choice and walk you through the process of setting up a new project using these technologies.

---

## Why Next.js

There are many important details you need to consider when you start a new project with React. Your code has to be bundled using a bundler, like webpack, and transformed using a compiler, like Babel.

Create React App can be a nice tool to handle this for you and give you a massive head start, but what about code-splitting, prerendering for performance, and SEO or server-side rendering?

To build a complete React application, you need more than CRA provides you with. You can save your self some time by using a Next.js, a React framework that provides a solution to all of these problems.

---

## Why TypeScript?

[TypeScript](https://www.typescriptlang.org/) is an open-source language that builds on JavaScript by adding static type definitions. Types provide a way to describe the shape of an object, providing better documentation and allowing TypeScript to validate that your code is working correctly.

TypeScript seems to be taking over front-end development. Almost 90% of developers (who filled in [the State of JS survey](https://2019.stateofjs.com/javascript-flavors/typescript/)) admit they’d like to use or learn to use TypeScript in their next project. Besides that, it’s one of the most loved languages, according to the 2019 [developer survey](https://insights.stackoverflow.com/survey/2019#most-loved-dreaded-and-wanted) by Stack Overflow.

It’s very popular and has lots of benefits during development. I’ve specified these benefits some more in “[Stack Choices: JavaScript vs TypeScript](https://codeburst.io/stack-choices-javascript-vs-typescript-c9db39b67bf6).”

---

## Let’s Start

If you start from scratch, open your terminal, and inside your projects folder, run `yarn create next-app` (Yarn is used in this example, but you could, of course, also go with npm).

You’ll get prompted with the following message:

```
What is your project named?
```

Fill in a name, and hit enter. The next message you’ll see is:

```
Pick a template
```

Choose `Default starter app`, and wait until your project is ready. Then, type `cd <your-project-name>` in your terminal to make sure you’re inside the directory where you can run `yarn dev` to start the development server.

If everything is fine, we can set up TypeScript. Start by creating an empty `tsconfig.json` file in the root of your project:

```
touch tsconfig.json
```

Try restarting the development server (`yarn dev`). You’ll get a warning message, like this:

```
It looks like you're trying to use TypeScript but do not have the required package(s) installed.
```

Follow the instructions to install TypeScript:

```
yarn add --dev typescript @types/react @types/node
```

Now, try starting the development server again. After starting the server, Next.js will:

- Populate the `tsconfig.json` file for you. You may customize this file.
- Create the `next-env.d.ts` file, which ensures Next.js types are picked up by the TypeScript compiler. You should _not_ touch this file.

Now let’s try it out by changing the `index.js` to `index.tsx`. If nothing breaks, that means you can now use TypeScript for your Next.js application.

And that’s it! Good luck with your project, and feel free to ask any questions if you have any.

Thanks for reading.

---

If you’re interested in saving time on your next project and skip implementing authentication, payments, teams, and more, then [go here](https://serverless.page/) and subscribe to follow my progress in building the SaaS starter-kit for React developers. You can also [follow me on Twitter](https://twitter.com/jakeprins_nl), or at [www.jakeprins.com](https://www.jakeprins.com/).