Beginner’s Guide to Next.js 13: Using the App Router with TypeScript

Next.js is a popular open-source framework built on top of React that allows you to build fast and efficient web applications. In this tutorial, we will cover the basics of Next.js and how to use it with TypeScript.

Next.js comes with a lot of features out of the box, such as server-side rendering, automatic code splitting, and easy navigation with the help of the built-in routing system. It also has built-in support for CSS modules, which helps you write modular and maintainable styles.

In this tutorial, we will cover the following topics:

1. Setting up a new Next.js project
2. Creating a basic React component in Next.js
3. Using TypeScript in Next.js
4. Setting up routing in Next.js
5. Creating a multi-page application using Next.js

Let’s get started!

1. Setting up a new Next.js project

To create a new Next.js project, you first need to have Node.js installed on your system. You can download and install Node.js from the official website.

Once you have Node.js installed, you can create a new Next.js project by running the following commands in your terminal:

npx create-next-app my-next-app
cd my-next-app
npm run dev

This will create a new Next.js project in a directory named my-next-app, change into that directory, and start the development server. You can open your browser and navigate to http://localhost:3000 to see your Next.js project running.

1. Creating a basic React component in Next.js

Next.js allows you to create React components using the built-in pages directory. Any file you create in the pages directory will be automatically routed by Next.js.

Let’s create a new file called index.tsx in the pages directory with the following content:

import React from 'react';

const Home: React.FC = () => {
  return <h1>Welcome to Next.js</h1>;
};

export default Home;

Now, if you navigate to http://localhost:3000 in your browser, you should see the text "Welcome to Next.js" displayed on the screen.

1. Using TypeScript in Next.js

Next.js has built-in support for TypeScript, which allows you to write typed JavaScript code for your React components. To enable TypeScript in your Next.js project, you need to create a tsconfig.json file in the root of your project with the following content:

{
  "compilerOptions": {
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "skipLibCheck": true
  }
}

You also need to install the TypeScript and @types/react packages by running the following command:

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

Now you can start writing TypeScript code in your Next.js project.

1. Setting up routing in Next.js

Next.js provides a built-in routing system that allows you to create multiple pages in your application. To create a new page in your Next.js project, you can simply add a new file in the pages directory with the desired route.

Let’s create a new file called about.tsx in the pages directory with the following content:

import React from 'react';

const About: React.FC = () => {
  return <h1>About Us</h1>;
};

export default About;

Now, if you navigate to http://localhost:3000/about in your browser, you should see the text "About Us" displayed on the screen.

1. Creating a multi-page application using Next.js

Next.js allows you to create a multi-page application by adding more pages to the pages directory. You can create as many pages as you want and link them together using the built-in Link component provided by Next.js.

Let’s create a new file called contact.tsx in the pages directory with the following content:

import React from 'react';

const Contact: React.FC = () => {
  return <h1>Contact Us</h1>;
};

export default Contact;

Now, you can create a navigation menu in your index.tsx file and link to the about and contact pages using the Link component provided by Next.js:

import React from 'react';
import Link from 'next/link';

const Home: React.FC = () => {
  return (
    <>
      <h1>Welcome to Next.js</h1>
      <nav>
        <Link href="/about">About</Link>
        <Link href="/contact">Contact</Link>
      </nav>
    </>
  );
};

export default Home;

Now, if you navigate to http://localhost:3000 in your browser, you should see the text "Welcome to Next.js" displayed on the screen with links to the "About" and "Contact" pages.

That’s it! You have now successfully created a basic Next.js project with TypeScript and set up routing for a multi-page application. Next.js is a powerful framework that allows you to build fast and efficient web applications with React. If you want to learn more about Next.js, I recommend checking out the official documentation for more advanced features and capabilities.