DEV Community

Cover image for How to set up a Next.js project with TypeScript and React
Filippo Fonseca
Filippo Fonseca

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (13)

Collapse
 
sitesh profile image
Sitesh Kumar Sahoo

Thank you!! It worked

Collapse
 
filippofonseca profile image
Filippo Fonseca

Glad I could help!!

Collapse
 
ledahuerta profile image
LedaHuerta

Thanks, help a lot!!

Collapse
 
filippofonseca profile image
Filippo Fonseca

:)

Collapse
 
markmusic2727 profile image
Mark Music

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

Collapse
 
huydhoang profile image
Info Comment hidden by post author - thread only accessible via permalink
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!

Collapse
 
filippofonseca profile image
Filippo Fonseca • Edited

Thank you!! Appreciate it :)

Collapse
 
alikhamis profile image
Ali-Khamis

Thank You !!

Collapse
 
filippofonseca profile image
Filippo Fonseca

Thank you!!

Collapse
 
huydhoang profile image
Huy

Thanks for sharing, really helpful for starters!

Collapse
 
filippofonseca profile image
Filippo Fonseca

Appreciate it!

Collapse
 
braydentw profile image
Brayden W ⚡️

Thanks for the quick tip!!

Collapse
 
filippofonseca profile image
Filippo Fonseca

Thank you!! Glad I could help.

Some comments have been hidden by the post's author - find out more