How to set up a Next.js project with TypeScript and React

NextJS is one of the most important, widely-used, and reliable frameworks for server-side rendering and production with React. This, combined with the ability to integrate TypeScript into your NextJS project makes it all-the-more great to use.

But how exactly do you go about doing so?

1. Initial setup

Before we begin integrating TypeScript into our project, we must first set up our boilerplate Next app with the default JavaScript.

Generate the Next app

In order to generate our boilerplate Next starter code, run the following command in your terminal:

yarn create next-app

NOTE: You can always use NPM's npx create-next-app, but we will be utilizing Yarn over the course of this project and walkthrough.

After you run the initial script, the CLI will prompt you with the following question:

? What is your project named? >

After you type in the name of your project and press Enter, you'll be good to go! (at least for the basic NextJS setup).

You can now test that the setup has gone smoothly by running yarn dev in your command-prompt and opening the port (usually localhost:3000, on a browser:

cd my-app
yarn dev

2. Create a tsconfig.json file

In order to implement TypeScript into our NextJS project, we must first create. a tsconfig.json file. Having this file automatically tell NextJS that the root directory is one of a TypeScript project. To put it simply, the presence of a tsconfig.json file in a project indicates that TypeScript is present as well.

How do we go about creating one? Simply run this command in the root directory of your project:

touch tsconfig.json

3. Install TypeScript & Test Server

Install dependencies

Install all required dependencies for TypeScript and NextJS by running the following command in your terminal:

# If you're using NPM
npm install --save-dev typescript @types/react @types/node

# If you’re using Yarn
yarn add --dev typescript @types/react @types/node

Now, pause your server (Ctrl+C) and start it back up again by using yarn dev.

As you do so, you will notice that NextJS has automatically detected TypeScript in your project (due to the tsconfig.json file that we created earlier).

4. Convert to TypeScript (really simple)

Change the file extensions

Now that TypeScript is properly set up in our project, we can now use it to program our app.

For starters, I would suggest you convert all existing JavaScript files in the pages directory of your project into TypeScript (REMEMBER: filename.tsx for React).

You are now ready to enjoy the benefits of using TypeScript inside of your NextJS app.

Happy hacking!

Comments

[LedaHuerta]

Thanks, help a lot!!

[Filippo Fonseca]

:)

[Sitesh Kumar Sahoo]

Thank you!! It worked

[Filippo Fonseca]

Glad I could help!!

[Ali-Khamis]

Thank You !!

[Filippo Fonseca]

Thank you!!

[Huy]

Thanks for sharing, really helpful for starters!

[Filippo Fonseca]

Appreciate it!

[Brayden W ⚡️]

Thanks for the quick tip!!

[Filippo Fonseca]

Thank you!! Glad I could help.

[Mark Music]

Great article! I always seem to forget these steps and it's amazing to have something like this to refer to.

[Huy]

Just an update. Based on this and the docs, I made this template for quick use github.com/huydhoang/next-typescri...
All latest versions with auto code formatting. Hope this would help!

[Filippo Fonseca]

Thank you!! Appreciate it :)