Zero Config TypeScript Applications with Next.js

Do you want to get up and running quickly with modern web applications but don't have the time or knowledge to navigate complex configurations? With Next.js, you can set up zero config TypeScript applications to build modern and performant web apps using this open-source JavaScript framework. With this blog post, you'll get up to speed quickly on how to use these two technologies together to build applications without worrying about complex configurations. You'll get into the core concepts of Next.js, understand how to use TypeScript within your projects, and learn how to set up a development environment so that you can start building quickly and easily.

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

Where 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

And you should be seeing a small application that's available at http://localhost:3000.

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"
}

To this:

{
  "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 .js to .tsx, and you're good to go. For example, if you have a file called pages/index.js, you can rename it to pages/index.tsx.

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.

Conclusion

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.

> Subscribe to my YouTube channel

Or find me on Twitter at @gethackteam. I'd love to hear from you!