How to Set Up Next JS with TypeScript

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:

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 in TypeScript + Next JS project. In combination with type checking (like TypeScript), linting can reduce errors, improve your code quality, and make your code consistent across your codebase.

Author: Shantun Parmar

8 thoughts on “How to Set Up Next JS with TypeScript

  1. Needed to write you this very small word to help thank you very much yet again with your wonderful views you have shown on this website. This is so wonderfully open-handed with you to supply without restraint what exactly some people would have supplied for an electronic book to make some profit on their own, specifically since you might well have tried it in the event you wanted. Those tricks likewise worked to provide a great way to understand that the rest have the same zeal the same as my very own to understand whole lot more with respect to this problem. I think there are thousands of more pleasurable times up front for those who view your website.

  2. I am commenting to let you know of the great encounter my friend’s daughter found reading your web page. She figured out numerous issues, not to mention what it’s like to have a wonderful giving mood to have men and women really easily have an understanding of selected hard to do subject areas. You really exceeded our own expectations. Many thanks for imparting the interesting, safe, explanatory and even easy thoughts on the topic to Janet.

  3. First off I would like to say superb blog!
    I had a quick question in which I’d like to ask if you do not mind.

    I was interested to find out how you center yourself
    and clear your mind prior to writing. I’ve had a tough time clearing my thoughts
    in getting my ideas out there. I truly do enjoy writing but it
    just seems like the first 10 to 15 minutes are generally lost just trying to figure out
    how to begin. Any recommendations or tips? Cheers!

Leave a Reply

Your email address will not be published.