How to Set Up Next.js With TypeScript
If you start a new React project, you might want to consider Next.js and TypeScript. In this article, we explain why this would be a great choice and walk you through the process of setting up a new project using these technologies.
There are many important details you need to consider when you start a new project with React. Your code has to be bundled using a bundler, like webpack, and transformed using a compiler, like Babel.
Create React App can be a nice tool to handle this for you and give you a massive head start, but what about code splitting, prerendering for performance, and SEO or server-side rendering?
To build a complete React application, you need more than CRA provides you with. You can save your self some time by using a Next.js, a React framework that provides a solution to all of these problems.
TypeScript seems to be taking over front-end development. Almost 90% of developers (who filled in the State of JS survey) admit they’d like to use or learn to use TypeScript in their next project. Besides that, it’s one of the most loved languages, according to the 2019 developer survey by Stack Overflow.
If you start from scratch, open your terminal, and inside your projects folder, run
yarn create next-app (Yarn is used in this example, but you could, of course, also go with npm).
You’ll get prompted with the following message:
What is your project named?
Fill in a name, and hit enter. The next message you’ll see is:
Pick a template
Default starter app, and wait until your project is ready. Then, type
cd <your-project-name> in your terminal to make sure you’re inside the directory where you can run
yarn dev to start the development server.
If everything is fine, we can set up TypeScript. Start by creating an empty
tsconfig.json file in the root of your project:
Try restarting the development server (
yarn dev). You’ll get a warning message, like this:
It looks like you're trying to use TypeScript but do not have the required package(s) installed.
Follow the instructions to install TypeScript:
yarn add --dev typescript @types/react @types/node
Now, try starting the development server again. After starting the server, Next.js will:
- Populate the
tsconfig.jsonfile for you. You may customize this file.
- Create the
next-env.d.tsfile, which ensures Next.js types are picked up by the TypeScript compiler. You should not touch this file.
Now let’s try it out by changing the
index.tsx. If nothing breaks, that means you can now use TypeScript for your Next.js application.
And that’s it! Good luck with your project, and feel free to ask any questions if you have any.
Thanks for reading.