NextJS special file names

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.

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

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.

Mani Kiran N @nmanikiran