Using Next.js with TypeScript: A Step-by-Step Tutorial

Next.js has become one of the most popular React frameworks for server-side rendering and static site generation, and integrating it with TypeScript ensures your applications are robust and maintainable. In this tutorial, we’ll walk through setting up a Next.js project with TypeScript from scratch, and demonstrate some foundational concepts and components you might find useful.

Step 1: Setting Up Your Next.js Project

First, you need to set up a new Next.js project. Open your terminal and run the following command:

npx create-next-app@latest --typescript my-next-ts-app

This command initializes a new Next.js project with TypeScript support straight out of the box. The my-next-ts-app is the folder where your application’s files will be stored.

Step 2: Project Structure

Once you’ve set up your project, you’ll notice a basic structure as follows:

• pages/: Used for defining routes.
• public/: Serves static files.
• styles/: Contains CSS modules.
• next-env.d.ts: Automatically created to include TypeScript definitions.
• tsconfig.json: TypeScript configuration file.

The tsconfig.json file in particular is key. This file is where you'll define how TypeScript should transpile your sources. Feel free to customize it based on your project requirements. Here's a look at what a basic tsconfig.json might include:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Step 3: Creating a TypeScript Page

Let’s create a simple page in TypeScript. Within the pages directory, create a new file named index.tsx. Here, we'll define a basic component:

import { NextPage } from 'next';

interface HomePageProps {
  title: string;
}

const Home: NextPage<HomePageProps> = ({ title }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>Welcome to your new Next.js app with TypeScript!</p>
    </div>
  );
};

export default Home;

In this code snippet, we’ve defined a component Home and used TypeScript interfaces to declare HomePageProps, offering strict type checking for the title property.

Step 4: Adding a Custom Component

Let’s create a custom button component. Create a new directory under components/ named Button and add a Button.tsx file.

import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

export default Button;

Here we define a Button component with TypeScript props validation. This ensures that label is a string and onClick is a function, providing built-in safeguards against passing incorrect prop types.

Step 5: Using the Component

To use your new component, import it in your index.tsx:

import { NextPage } from 'next';
import Button from '../components/Button/Button';

const Home: NextPage = () => {
  const handleClick = () => {
    alert("Button clicked!");
  };

  return (
    <div>
      <h1>Hello Next.js with TypeScript!</h1>
      <Button label="Click Me" onClick={handleClick} />
    </div>
  );
};

export default Home;

Conclusion

By following these steps, you now have a simple Next.js application set up with TypeScript. This setup allows you to leverage the advantages of TypeScript, such as type safety and IntelliSense, which can significantly enhance the development experience.

Next.js and TypeScript together can seem daunting at first, but once you get the hang of it, you’ll find your applications will be more maintainable and easier to debug. Explore the rich ecosystem Next.js offers by diving into more features like API routes, middleware, and more.

What’s Next?

From here, consider exploring the following:

• API Routes: Learn how to create and manage APIs within Next.js.
• Static and Server-Side Rendering: Explore the different rendering methods available in Next.js.
• Deployment: Deploy your Next.js application using Vercel or other hosting platforms.

Feel free to dive deeper into these topics to elevate your Next.js and TypeScript skills further!