File-Based Routing

1. Understanding the File-Based Routing Concept

File-Based Routing Overview: In Next.js (using the new app folder), every folder and file corresponds to a route. Instead of manually configuring routes (as in traditional single page applications), you simply create folders and files:
- A folder inside app/ represents a route segment.
- A file named page.js (or page.jsx) inside a folder renders the content for that route.
Routing Benefits:
- No need for extra libraries: You don’t need React Router or similar tools.
- Intuitive and Scalable: Adding nested or dynamic routes is as simple as creating subfolders.

// app/layout.jsx

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

2. Creating Basic Routes

a. Home Page Route

Navigate to your project’s root folder (e.g., open property-shop-next-app in your code editor).

Inside the app/ folder, create a file named page.jsx if it isn’t already present.

This file represents your home route (/).

Add a simple component:

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to Property Shop</h1>
      <p>This is the home page.</p>
    </div>
  );
}

b. Creating a New Route (e.g., `/properties`)

Inside the app/ folder, create a new folder called properties.

Within the properties folder, create a file named page.jsx.

This file will render when you visit /properties.

Example component:

export default function PropertiesPage() {
  return (
    <div>
      <h1 className='text-3xl' >Properties</h1>
      <Link href='/properties'> List of properties will appear here.</Link>
    </div>
  );
}

3. Building Nested Routes

a. Nested Route for Adding a Property (`/properties/add`)

Inside the properties folder, create a subfolder named add.

Within the add folder, create a file called page.jsx.

This page renders at the route /properties/add.

Example:

export default function PropertyAddPage() {
  return (
    <div>
      <h1>Add a New Property</h1>
      <p>Form to add a new property will go here.</p>
    </div>
  );
}

4. Implementing Dynamic Routes-[slug] or [id]

a. Creating a Dynamic Route for a Single Property (`/properties/[id]`)

Inside the properties folder, create a folder for the dynamic segment.
- Name it [id] (using square brackets tells Next.js that this part is dynamic).

Within the [id] folder, create a file named page.jsx.

This file will handle any route matching /properties/some-id.

Example component:

//app/properties/[id]/page.jsx
'use client'
import { useParams } from 'next/navigation';

export default function PropertyPage() {
  const params = useParams();
  const { id } = params;

  return (
    <div>
      <h1>Property Details</h1>
      <p>Displaying details for property ID: {id}</p>
    </div>
  );
}

b. (Optional) Creating a Catch-All Route

Purpose: To capture additional sub-paths beyond the dynamic parameter.
Implementation: Rename the folder from [id] to [...id].
- This allows any route matching /properties/anything/here to be handled by the same component.
Note: Use catch-all routes only when you need to handle nested dynamic segments.

5. Navigating Between Routes

a. Using the Next.js `<Link>` Component

Import Link from next/link:
```
import Link from 'next/link';
```

Replace traditional <a> tags with <Link> for client-side navigation:

Example in your home page:

import Link from 'next/link'
export default function HomePage() {
  return (
    <div>
      <h1>Welcome to Property Shop</h1>
      <p>Click below to view properties:</p>
      <Link href="/properties">
        Show Properties
      </Link>
    </div>
  );
}

Benefit: Using <Link> improves performance by preventing full page reloads and enabling smooth client-side transitions.

6. Recap and Best Practices

File-Based Routing:
- Every folder in the app/ directory corresponds to a URL segment.
- Naming a file page.jsx automatically makes it a routable page.
Nested and Dynamic Routes:
- Create nested folders to represent sub-routes (e.g., /properties/add).
- Use square brackets (e.g., [id]) for dynamic parameters.
- Optionally, use [...id] for catch-all dynamic routes.
Client-Side Navigation:
- Always use the <Link> component from Next.js for smoother navigation between pages.

PreviousNew Project & Folder Structure NextServer vs Client Components & Router Hooks

Last updated 8 months ago