Next.js - File Conventions

Quiz

What is Next.js File Convention?

Next.js uses a default filename and folder structure for certain sections like pages, app, layout.js, and middleware.js, which automatically define routes, layouts, middleware, and other configurations. This is called the file convention in Next.js. In this chapter, we will learn about all the default file conventions in Next.js.

File Conventions

Next.js provide simple filename convention to simplify the development process. For example, to handle custom error pages, we can create a file named error.js inside the pages directory. The table below shows the all the default file conventions in Next.js.

File Name	Location	Purpose
default.js	app/	Provides fallback content when NextJS cannot determine which page to render.
error.js	app/	Custom error page to handle application-wide errors.
instrumentation.js	app/	Used for tracking and monitoring app activity.
layout.js	app/	Defines the common layout structure (header, footer, etc.) for pages.
loading.js	app/	Used to define loading state while the page or data is being fetched.
middleware.js	app/	Custom middleware to handle requests and responses, often for authentication.
not-found.js	app/	Custom 404 page to handle not found errors.
page.js	pages/	Represents individual pages in the application, automatically routed.
route.js	app/	Defines custom server-side routing logic.
template.js	app/	Defines reusable templates for specific types of content or pages.

The default.js File

The default.js file is used to define the default content for a page when Next.js cannot determine which page to render. It happens when a user refreshes the page or navigates to a URL that does not match any of the defined routes. This file is located in the app directory.

// File: app/default.js

const DefaultLayout = ({ children }) => (
    <div>
        This is the default layout
        {children}
    </div>
);

export default DefaultLayout;

The error.js File

The error.js file is used to define the custom error page for the application. It is located in the app directory. This file is used to handle application-wide errors, such as 404 errors or 500 errors.

Know more about error handling in Next.js here.

// File: app/404.js

export default function Custom404() {
    return (
        <div>
            <h1>404 - Page Not Found</h1>
            <p>Sorry, the page you are looking for does not exist.</p>
        </div>
    );
}

The instrumentation.js File

The instrumentation.js file is used to define the custom instrumentation for the application. It is located in the app directory. This file is used to track and monitor app activity.

// File: app/instrumentation.js

export default function instrumentation() {
    return {
        name: 'My Application',
        version: '1.0.0',
        url: 'https://my-application.com',
    };
}

The layout.js File

The layout.js file is used to define the common layout structure for pages. It is located in the app directory. This file is used to define the common layout structure for pages.

// File: app/layout.js

import { Metadata } from 'next';

const metadata: Metadata = {
    title: 'My Application',
    description: 'My Application description',
};

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang="en">
            <head>
                <meta name="description" content={metadata.description} />
            </head>
            <body>
                {children}
            </body>
        </html>
    );
}

The loading.js File

The loading.js file is used to define the loading state for pages. It is located in the app directory. This file is used to setup custom animation or logo while the page is loading.

// File: app/loading.js

export default function Loading() {
    return (
        <div>
            <h1>Loading...</h1>
        </div>
    );
}

Print Page