Loading...

How to create custom types in Typescript in a Next.js app?

question nextjs react
Ram Patra Published on July 9, 2024
Tested on Next.js 14

Declaring custom types in TypeScript for a Next.js application involves creating type definitions that can be used across your project to ensure type safety and better code management. Here are the steps to declare and use custom types in a Next.js app:

Step-by-Step Guide

  1. Setup TypeScript in Next.js: If you haven’t already set up TypeScript in your Next.js project, you can do so by creating a tsconfig.json file at the root of your project and running the following command:

    npx next dev
    

    This will automatically set up the basic TypeScript configuration for you.

  2. Create a Types Directory: Create a directory to store your custom types. This is typically done in a folder named types at the root of your project.

    mkdir types
    
  3. Define Your Custom Types: Create a new TypeScript file inside the types directory. For example, you can create a types.ts file and define your custom types there.

    // types/types.ts
    export interface User {
      id: number;
      name: string;
      email: string;
    }
    
    export type UserRole = 'admin' | 'user' | 'guest';
    
  4. Using Custom Types in Your Components: Import and use these types in your Next.js components or other TypeScript files.

    // app/page.tsx
    import { User, UserRole } from '../types/types';
    
    const HomePage = () => {
      const user: User = {
        id: 1,
        name: 'John Doe',
        email: '[email protected]'
      };
    
      const role: UserRole = 'admin';
    
      return (
        <div>
          <h1>Welcome, {user.name}</h1>
          <p>Your role is: {role}</p>
        </div>
      );
    };
    
    export default HomePage;
    
  5. (Optional) Configure Path Aliases: To make imports cleaner, you can configure path aliases in your tsconfig.json.

    // tsconfig.json
    {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@types/*": ["types/*"]
        }
      }
    }
    

    After configuring the path aliases, you can import the types like this:

    // pages/index.tsx
    import { User, UserRole } from '@types/types';
    
    const HomePage = () => {
      // ...rest of the code
    };
    
  6. Re-run the Development Server: Make sure to restart your Next.js development server to apply the TypeScript configurations.

Example Project Structure

my-nextjs-app/
├── app/
│   ├── page.tsx
├── types/
│   └── types.ts
├── tsconfig.json
└── package.json

By following these steps, you can effectively declare and use custom types in your Next.js application with TypeScript, improving type safety and code quality.

For defining global types in a Next.js app, read this blog.

Presentify

Take your presentation to the next level.

FaceScreen

Put your face and name on your screen.

ToDoBar

Your to-dos on your menu bar.

Ram Patra Published on July 9, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question nextjs react July 18, 2024 How to programmatically navigate to a page in Next.js?

In Next.js, you can programmatically navigate to different pages using the useRouter hook from the next/navigation module. This hook provides a convenient way to navigate between pages within your Next.js application. Below is an example demonstrating how to use the useRouter hook to programmatically navigate to another page.

question eslint nextjs November 14, 2024 How to disable ESLint in a Nextjs project?

Although it is highly advisable to enable ESLint at all times, if you do not want ESLint to run during next build, you can set the eslint.ignoreDuringBuilds option in next.config.js to true like below:

question nextjs react February 9, 2024 How to make an HTML button element behave like a Link component in Next.js?

In Next.js, you can use the Link component from next/link to create client-side navigation. However, if you want to use an HTML button element (<button>) to behave like a link, you can wrap it with the Link component. Here’s how you can do it: