DEV Community

Mani Kiran N
Mani Kiran N

Posted on

NextJS special file names

#nextjs #routing #navigation #layouts

In Next.js, special file names play a crucial role in defining layouts, functionalities, and behaviors within your application. These files follow a specific naming convention and are automatically recognized by Next.js, enabling a structured and efficient development process.

Below is a comprehensive list of special file names, their purposes, locations, and use cases.

Image description

1. page.js (or page.tsx)

  • Purpose: Defines the UI for a route segment.

  • Location: Inside a route segment folder.

  • Example:

    app/
  └── about/
      └── page.js
    • URL: /about

  • Use Case: Create the main content for a route.

2. layout.js (or layout.tsx)

  • Purpose: Defines a shared layout for a route segment and its children.

  • Location: Inside a route segment folder.

  • Example:

    app/
  └── dashboard/
      ├── layout.js
      └── page.js
    • The layout.js file wraps the page.js content.

  • Use Case: Create shared layouts (e.g., headers, footers, sidebars).

3. loading.js (or loading.tsx)

  • Purpose: Defines a loading UI for a route segment while its content is being fetched.

  • Location: Inside a route segment folder.

  • Example:

    app/
  └── profile/
      ├── loading.js
      └── page.js
    • Displays a loading spinner or skeleton UI while page.js is loading.

  • Use Case: Improve user experience during data fetching.

4. error.js (or error.tsx)

  • Purpose: Defines an error boundary for a route segment.

  • Location: Inside a route segment folder.

  • Example:

    app/
  └── products/
      ├── error.js
      └── page.js
    • Displays an error UI if page.js throws an error.

  • Use Case: Handle errors gracefully.

5. not-found.js (or not-found.tsx)

  • Purpose: Defines a 404 page for a route segment.

  • Location: Inside a route segment folder.

  • Example:

    app/
  └── not-found.js
    • Displays a custom 404 page for unknown routes.

  • Use Case: Create a custom "Not Found" page.

6. route.js (or route.ts)

  • Purpose: Defines API routes or server-side logic for a route segment.

  • Location: Inside a route segment folder.

  • Example:

    app/
  └── api/
      └── users/
          └── route.js
    • Handles API requests to /api/users.

  • Use Case: Create API endpoints or server-side handlers.

7. template.js (or template.tsx)

  • Purpose: Similar to layout.js, but re-renders on navigation.

  • Location: Inside a route segment folder.

  • Example:

    app/
  └── blog/
      ├── template.js
      └── page.js
    • Re-renders the template on every navigation.

  • Use Case: Create dynamic layouts that reset on navigation.

8. head.js (or head.tsx)

  • Purpose: Defines the <head> content for a route segment (e.g., title, meta tags).

  • Location: Inside a route segment folder.

  • Example:

    app/
  └── about/
      ├── head.js
      └── page.js
    • Customizes the <head> for the /about page.

  • Use Case: Add SEO metadata or custom scripts.

9. middleware.js (or middleware.ts)

  • Purpose: Defines middleware logic for route handling (e.g., authentication, redirects).

  • Location: Root of the project or inside a route segment folder.

  • Example:

    middleware.js
    • Runs middleware logic before rendering a page.

  • Use Case: Handle authentication, redirects, or other server-side logic.

10. default.js (or default.tsx)

  • Purpose: Defines a fallback UI for parallel routes.

  • Location: Inside a parallel route segment folder.

  • Example:

    app/
  └── @dashboard/
      └── default.js
    • Displays a fallback UI if no parallel route is active.

  • Use Case: Handle missing parallel routes.

11. global.css

  • Purpose: Defines global styles for the application.

  • Location: Root of the project or inside the app directory.

  • Example:

    app/
  └── global.css
    • Applies styles globally.

  • Use Case: Add global CSS styles.

12. metadata.js (or metadata.ts)

  • Purpose: Defines metadata for a route segment (e.g., title, description).

  • Location: Inside a route segment folder.

  • Example:

    app/
  └── about/
      ├── metadata.js
      └── page.js
    • Customizes metadata for the /about page.

  • Use Case: Add SEO metadata.

13. sitemap.js (or sitemap.ts)

  • Purpose: Defines the sitemap for the application.

  • Location: Root of the project or inside the app directory.

  • Example:

    app/
  └── sitemap.js
    • Generates a sitemap for SEO.

  • Use Case: Improve SEO with a sitemap.

14. robots.txt

  • Purpose: Defines rules for web crawlers.

  • Location: Root of the project or inside the app directory.

  • Example:

    app/
  └── robots.txt
    • Controls access to your site for search engines.

  • Use Case: Manage search engine indexing.

15. favicon.ico

  • Purpose: Defines the favicon for the application.

  • Location: Root of the project or inside the app directory.

  • Example:

    app/
  └── favicon.ico
    • Displays the favicon in the browser tab.

  • Use Case: Add a custom favicon.

16. global-error.js (or global-error.tsx)

Purpose : Defines a global error boundary for the entire application.

Location: At the root of the app directory.

Example:

app/
  └── global-error.js
Enter fullscreen mode Exit fullscreen mode

Use Case: Handles application-wide errors and provides a fallback UI.

Summary Table

File Name Purpose Location
page.js Defines the UI for a route segment Inside route segment
layout.js Defines a shared layout Inside route segment
loading.js Defines a loading UI Inside route segment
error.js Defines an error boundary Inside route segment
not-found.js Defines a 404 page Inside route segment
route.js Defines API routes or server-side logic Inside route segment
template.js Defines a re-rendering layout Inside route segment
head.js Defines content Inside route segment
middleware.js Defines middleware logic Root or route segment
default.js Defines a fallback UI for parallel routes Inside parallel route
global.css Defines global styles Root or app directory
metadata.js Defines metadata for a route segment Inside route segment
sitemap.js Defines the sitemap Root or app directory
robots.txt Defines rules for web crawlers Root or app directory
favicon.ico Defines the favicon Root or app directory
global-error.js Defines a global error boundary for the entire application Root of the app directory

By using these special file names, you can organize your Next.js application effectively and leverage built-in features for routing, layouts, error handling, and more.

Top comments (0)