Part 3: Adding TypeScript

[App] Routing and Layouts

If you’re familiar with TypeScript, a language that adds static typing to JavaScript, you might want to use it in your Next.js application. This step is optional and is intended for those who already know TypeScript. In this guide, I’ll show you how to set up TypeScript in your Next.js project.

Why Use TypeScript?

TypeScript can help you catch errors early and improve your code's readability and maintainability. It allows you to define types and interfaces, making your code more predictable and easier to debug.

Setting Up TypeScript

Step 1: Stop the Development Server

Before we start, make sure to stop the development server. We’ll need to rename some files and install new dependencies.

Step 2: Rename Files

Rename your page.jsx file to page.tsx. The .tsx extension is used for TypeScript files that also contain JSX code. Do the same for your layout file, renaming layout.jsx to layout.tsx.

Step 3: Install TypeScript and Type Definitions

Next.js can automatically set up TypeScript for you. Start the server with the following command:

npm run dev

The Next.js command line tool will detect that you’re trying to use TypeScript and install the required packages automatically. It will also create a tsconfig.json file for you. In your package.json, you will now see the following dev dependencies:

"devDependencies": {
  "@types/node": "^20.8.9",
  "@types/react": "^18.2.33",
  "typescript": "^5.2.2"
}

You’ll also have two new files: next-env.d.ts, which contains some references, and tsconfig.json, the main configuration file used by the TypeScript compiler.

Step 4: Review the Configuration

Your tsconfig.json file will look something like this:

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

By default, the strict option is set to false. You can set it to true if you prefer stricter type-checking.

Step 5: Update Your Components

Your components don’t need major changes to work with TypeScript. Here’s an example of how you can update your HomePage component:

export default function HomePage() {
  return (
    <>
      <h1>My first Next.js page</h1>
    </>
  );
}

For the RootLayout component, you can define an interface to specify the props:

import type { ReactNode } from 'react';

interface LayoutProps {
  children: ReactNode;
}

export default function RootLayout({ children }: LayoutProps) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

Using an interface helps TypeScript understand the types of your props, making your code more robust.

Step 6: Personal Preferences and Best Practices

While using TypeScript, you might encounter different ways to achieve the same result. For instance, you can annotate props directly in the function signature instead of defining a separate interface. Both approaches are valid, and it’s mostly a matter of personal preference.

One feature I like to use is import type for types that are only used by the compiler at build time. This is not usually necessary, but it helps differentiate between types and runtime code.

Conclusion

By following these steps, you’ve added TypeScript support to your Next.js project. TypeScript can greatly enhance your development experience by catching errors early and making your code more maintainable. Even though the rest of this guide will use JavaScript, you now have the tools to convert your project to TypeScript if you prefer.

Feel free to explore the TypeScript documentation to learn more about its features and how to use it effectively in your projects. Happy coding!

PreviousPart 2: Setting Up Your First Next.js Project NextPart 4: Adding More Pages to Your Next.js Application

Last updated 1 year ago