# 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.
```jsx
// app/layout.jsx
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
{children}
);
}
```
***
### 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:
```jsx
export default function HomePage() {
return (
Welcome to Property Shop
This is the home page.
);
}
```
#### 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:
```jsx
export default function PropertiesPage() {
return (
Properties
List of properties will appear here.
);
}
```
***
### 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:
```jsx
export default function PropertyAddPage() {
return (
Add a New Property
Form to add a new property will go here.
);
}
```
***
### 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:
```jsx
//app/properties/[id]/page.jsx
'use client'
import { useParams } from 'next/navigation';
export default function PropertyPage() {
const params = useParams();
const { id } = params;
return (
Property Details
Displaying details for property ID: {id}
);
}
```
#### 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 `` Component
1. **Import Link from `next/link`:**
```jsx
import Link from 'next/link';
```
2. **Replace traditional `` tags with `` for client-side navigation:**
* Example in your home page:
```jsx
import Link from 'next/link'
export default function HomePage() {
return (