How to Set Up Next JS with TypeScript [2023]

Next JS is an open-source framework based on React for building rich and interactive web applications. Thanks to Server Side Rendering and Static Generation, Next JS can also be used to create marketing websites like landing pages or blogs. It makes search engine crawlers easier to understand your website.

Before that, React was more used in dashboards or admin templates where crawlers don't need to index the backend pages.

TypeScript + Nextjs, a love story

On the other hand, TypeScript is a superset of JavaScript which provides typing to your JS projects. Statically-type language like TypeScript brings a lot of value to the developer:

• Better completion
• Code are easier to refactor
• Reduce errors by caught bugs in build time

As you may know, I've created several Next JS templates in React and Tailwind CSS based on Nextjs Starter Boilerplate. All templates are built from scratch natively in React and TypeScript. I've chosen this stack to have a high standard on my code and make other developers easier to build their own website.

Nextjs Starter Boilerplate relies on several famous JavaScript libraries like ESLint, Prettier, TypeScript. In this article, I'll focus on Next JS and TypeScript. But, I won't hesitate to write another post about how to set up Next JS project with ESLint and Prettier.

How to set up a Next JS app

In case you don't want to use Next JS Starter Boilerplate, we'll start from scratch with an empty project. Then, we'll set up TypeScript on top of Next js and enjoy typing in your React templates.

First, run the following command:

npx create-next-app my-next-app

create-next-app allows creating a new minimal Next.js project. Once that’s done, you can now cd into my-next-app folder (the newly created folder):

cd my-next-app

Then, you test if everything works as expected by starting the development server:

npm run dev

Open http://localhost:3000 from your browser, you should see a welcome page.

Integrate TypeScript and Next JS

After following the first step, we need to install TypeScript in your Next JS project by running the following command:

npm install --save-dev typescript @types/react @types/node

It installs three npm packages:

• TypeScript
• Two type definitions for React and Node

After finishing installing theses packages, you can rename your JavaScript files to TypeScript:

• Rename pages/api/hello.js to pages/api/hello.ts
• Rename pages/_app.js to pages/_app.tsx
• Rename pages/index.js to pages/index.tsx

Now, you can run the development folder again:

npm run dev

Surprise! Surprise! It also works with TypeScript. Indeed, Next JS supports TypeScript out-of-the-box. It automatically detects if the project contains some TypeScript files and create tsconfig.json when needed. Now, you can start writing your own React components in TypeScript.

In conclusion

Next JS has gained so much popularity recently with his large community and his built-in features like routing, CSS support, API, image optimization, etc. In our case, Next JS is well integrated with TypeScript. So, you can easily start writing React components in TypeScript without any troubles.

My current React stack based now on Next JS and TypeScript. I also add on top of that Tailwind CSS for the styling part. You can check my portfolio:

• Next JS Templates Tailwind CSS
• React Templates Tailwind CSS

You can also check out my article about Tailwind: The Pros And Cons

In my next article about Next JS, I'll show you how to set up ESlint and Prettier in Next JS TypeScript project. In combination with type checking (like TypeScript), linting can reduce errors, improve your code quality, and make your code consistent across your codebase.