How to Set Up Next.js With TypeScript

If you start a new React project, you might want to consider Next.js and TypeScript. 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 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) 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 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.”

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 and subscribe to follow my progress in building the SaaS starter-kit for React developers. You can also follow me on Twitter, or at www.jakeprins.com.