File-Based Routing

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

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

  2. 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)

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

  2. 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)

  1. Inside the properties folder, create a subfolder named add.

  2. 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])

  1. 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).

  2. 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

  1. Import Link from next/link:

    import Link from 'next/link';

  2. 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>
  );
}

  3. 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 StructureNextServer vs Client Components & Router Hooks

Last updated