YouTipPost ID:{id}
;
}
When the user visits /post/123, the id will be automatically assigned the value 123 and displayed on the page.
### Nested Routing
Next.js also supports nested routing, which means creating child routes under a certain route. For example:
app/├── about/│ ├── page.tsx # /about route page│ ├── team/│ │ └── page.tsx # /about/team child route page│ └── contact/│ └── page.tsx # /about/contact child route page
This approach gives your application a hierarchical structure while maintaining readable URL paths.
### Custom Routing Rules
If you want to customize the routing behavior, you can configure it through the next.config.js file. However, most common routing needs are already provided out-of-the-box by Next.js without additional configuration.
### Special Page and Route Features
* **`_app.js` and `_document.js`**: In Next.js, `_app.js` is the root component of the application, allowing you to provide common layouts and state for all pages. `_document.js` is mainly used to modify the structure of the HTML document (such as `head` and `body` tags).
* **`_error.js`**: You can customize error pages to handle 404 or other types of errors.
* * *
## Example
### Creating a Static Page
Let's create a simple static page as an example. Create an about/page.tsx file with the following content:
## Example
export default function AboutPage(){
returnNextjs Pages Router
Next.js uses file-system routing, which means the pages in your application are automatically determined by the file system structure. Each file and folder corresponds to a route, without needing to explicitly configure each path like traditional React routing, making the development process more intuitive and convenient.
* **Relationship between Pages and Routes:** In Next.js, each page is automatically mapped to a route from files in the `app/` or `pages/` directory. The path and filename of each file determines the URL for that page.
* **Basic Page Structure:** In Next.js, a page is any `.tsx` or `.js` file in the `app/` or `pages/` directory. Each page file automatically becomes a route in the application.
Next.js's routing system is very flexible, supporting static pages, dynamic routing, and nested routes, allowing developers to easily implement complex application structures.
* **File-system Routing**: Pages and routes are automatically mapped through the file structure in the `app/` or `pages/` directory.
* **Dynamic Routing**: You can create dynamic routes using square brackets (``) to handle dynamic parameters in the URL.
* **Nested Routing**: You can create nested routes through subdirectories to achieve multi-level route structures.
* **Route Navigation**: Use the `next/link` component to implement navigation between pages.
> Next.js 13 introduced the new app directory, which coexists with the traditional pages directory and provides more flexible routing and layout organization.
Assume the project directory structure is as follows:
app/├── page.tsx # corresponds to root path /├── about/│ └── page.tsx # corresponds to /about├── /│ └── page.tsx # corresponds to dynamic paths like /
* **`page.tsx`** file: Each page will have a `page.tsx` file, which is the component content for that route.
* **Dynamic Routing**: If the page path has dynamic parameters, you can use square brackets (``) to define dynamic routes. For example, `` means the path can accept any value as the `slug` parameter.
### Default Pages and Routes
Next.js automatically creates routes for files in your `app/` or `pages/` folder.
Here are some common routing examples:
* `app/page.tsx` corresponds to the `/` path.
* `app/about/page.tsx` corresponds to the `/about` path.
* `app//page.tsx` corresponds to `/`, which will match any URL path like `/post/1` or `/product/xyz`.
### Dynamic Routing
Dynamic routing allows you to dynamically render pages based on different parts of the URL.
In Next.js, you can implement dynamic routing by creating folders or files with square brackets.
For example, if you want to render different content based on different article IDs, you can do this:
app/├── /│ └── page.tsx # dynamic route, matches any `/` path
`` is a placeholder for dynamic routing, which can match any `id` parameter in the URL.
### Getting Dynamic Route Parameters
In Next.js, you can access dynamic route parameters using the useParams hook. For example:
## Example
'use client';
import{ useParams } from 'next/navigation';
export default function Post(){
const params = useParams();
const{ id }= params;// get dynamic route parameter `id`
return
);
}
The `` component is used for navigation between pages while maintaining a single-page application (SPA) experience.