Zero Config TypeScript Applications with Next.js
Click the image below to watch the YouTube video version of this blog post:
By the end of this blog post, you will:
- Know how to set up a fresh application with Next.js
- Understand the core concepts of Next.js and TypeScript
- Be able to use TypeScript in your Next.js Project
Why combine Next.js and TypeScript?
Building robust, modern web applications can be easy. With Next.js, you’ll leverage two of today’s most popular technologies — Next.js and TypeScript — together without needing any complex configuration.
Next.js is a framework that allows you to build React applications quickly. It’s a great choice for developers who want to get up and running soon with modern web applications without worrying about complex configurations. It’s also an excellent choice for developers who wish to build performant and scalable applications, as Next.js has many features that help you make fast and efficient applications. For example, Next.js supports Server-side Rendering (SSR) and Static Site Generation (SSG), two of the most efficient ways to load data in a web application.
TypeScript, on the other hand, is a typed language that adds type safety and improved performance to your codebase.
Together, they form a powerful combination for building modern and performant web apps.
Getting Started with Next.js
Setting up a development environment with Next.js is straightforward.
You can create a new Next.js project from your terminal using the following command:
npx create-next-app my-app
my-app is the name of your project, Next.js will prompt you to choose a template, creating a new project for you. For the sake of this blog post, we will select the default template, a simple Next.js application with a single page. And NOT set up a TypeScript project.
Once the project is created, you can run the following command to start the development server:
npm run dev
Fix the “parsing error for using import”
When writing this blog post, I’m using Next.js version 13.0.5. And when I hover over any of the
import statements at the top of a file, I get the following error:
Parsing error: Cannot find module 'next/babel'
This error shows because Next.js is using Babel to transpile the code, which somehow interferes with the Prettier plugin that my VSCode uses. To fix this, I need to change my
.eslintrc.json file from:
"extends": ["next/core-web-vitals", "prettier"]
When you’re done, you should be able to hover over the
import statements without getting any errors.
Using TypeScript in your Next.js Project
Now that we have a basic Next.js application, we can start adding TypeScript to it. To do this, you don’t have to install any additional packages, as Next.js has built-in support for TypeScript.
Convert all the files in your project from
.tsx, and you're good to go. For example, if you have a file called
pages/index.js, you can rename it to
And restart your development server. Next.js will install the dependencies needed to use TypeScript for your project and generate a
tsconfig.json. This file includes all the required configurations to use Next.js together with TypeScript. You should now be able to use TypeScript features in your codebase.
Once you’ve done this, you can use TypeScript features in your codebase. For example, you can add types to your function parameters and use interfaces to define the shape of your data.
In this blog post, you learned how to set up a new application with Next.js, understand the core concepts of Next.js and TypeScript, and be able to use TypeScript in your Next.js Project.
If you’re ready to take your web development skills to the next level and learn how to build powerful applications using Next.js and TypeScript, join me for my upcoming videos by subscribing to my YouTube channel.
Or find me on Twitter at @gethackteam. I’d love to hear from you!