Next.js 13+ Special Files: A Comprehensive Guide

June 18, 2024 (9mo ago)

Next.js 13+ introduced the App Router, which uses a file-based routing system. This system includes several special files that serve specific purposes within your application. Let's explore each of these files and their roles.

1. layout.tsx

Purpose: Defines a layout that wraps page or child segment.

export default function Layout({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}

2. page.tsx

Purpose: Represents the unique UI of a route and makes the route publicly accessible.

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

3. loading.tsx

Purpose: Creates a loading UI for a specific part of the app.

export default function Loading() {
  return <p>Loading...</p>
}

4. error.tsx

Purpose: Creates error UI for a specific part of the app.

'use client'
 
export default function Error({
  error,
  reset,
}: {
  error: Error
  reset: () => void
}) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}

5. not-found.tsx

Purpose: Creates custom UI for 'not found' errors.

export default function NotFound() {
  return <h2>404 - Page Not Found</h2>
}

6. template.tsx

Purpose: Similar to layout, but creates a new instance on navigation.

export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}

7. default.tsx

Purpose: Fallback page for parallel routes.

export default function Default() {
  return <p>This is a fallback page for parallel routes</p>
}

8. route.ts

Purpose: Creates API endpoints.

import { NextResponse } from 'next/server'
 
export async function GET() {
  return NextResponse.json({ message: 'Hello from the API' })
}

9. middleware.ts

Purpose: Defines middleware to be run before requests are completed.

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}

10. globals.css

Purpose: Adds global styles to the application.

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}

11. favicon.ico

Purpose: The favicon for your application.

(This is an image file, typically 16x16 or 32x32 pixels)

12. sitemap.ts

Purpose: Generates a sitemap for your application.

import { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://example.com',
      lastModified: new Date(),
    },
    {
      url: 'https://example.com/about',
      lastModified: new Date(),
    },
  ]
}

13. robots.ts

Purpose: Generates a robots.txt file for your application.

import { MetadataRoute } from 'next'
 
export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: '/private/',
    },
    sitemap: 'https://example.com/sitemap.xml',
  }
}

14. metadata.ts (or layout.tsx with metadata export)

Purpose: Defines metadata for the application or a specific route.

import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'My Next.js App',
  description: 'Welcome to my Next.js application',
}
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

These special files in Next.js 13+ with the App Router provide powerful tools for structuring your application, handling routing, managing layouts, and implementing various features like error handling and loading states.

console.log("Next.js special files: Powering modern web applications!");
LinkedIn
X