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

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

filippofonseca profile image Filippo Fonseca ・2 min read

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!

Discussion

pic
Editor guide
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
filippofonseca profile image
Filippo Fonseca Author

Thank you!! Appreciate it :)

Collapse
braydentw profile image
Brayden W

Thanks for the quick tip!!

Collapse
filippofonseca profile image
Filippo Fonseca Author

Thank you!! Glad I could help.