Как реализовать маршрутизацию в Next.js?

Пользователь

от guillermo , в категории: JavaScript , год назад

Как реализовать маршрутизацию в Next.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от yasmine , год назад

@guillermo 

Пользователь

от aaron_armstrong , 14 дней назад

@guillermo 

Маршрутизация в Next.js реализуется с помощью встроенного маршрутизатора, который использует файлы в папке pages.


Для создания нового маршрута в Next.js, вам нужно создать новый файл в папке pages с соответствующим именем. Например, если вы хотите создать маршрут /about, вам нужно создать файл about.js в папке pages.


Пример создания маршрута /about:

  1. Создайте файл about.js в папке pages:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// pages/about.js
const AboutPage = () => {
    return (
        <div>
            <h1>About Page</h1>
            <p>This is the about page content</p>
        </div>
    );
};

export default AboutPage;


  1. После создания файла, маршрут /about будет доступен в вашем приложении.


Также, для динамической маршрутизации в Next.js можно использовать файлы с динамическими параметрами. Например, для создания маршрута /users/:id, вы можете создать файл users/[id].js в папке pages.


Пример динамической маршрутизации:

  1. Создайте файл users/[id].js в папке pages:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
// pages/users/[id].js
const UserPage = ({ id }) => {
    return (
        <div>
            <h1>User Profile</h1>
            <p>User ID: {id}</p>
        </div>
    );
};

export default UserPage;

export async function getServerSideProps(context) {
    const { params } = context;
    const { id } = params;

    return {
        props: {
            id: id
        }
    };
}


  1. В этом примере, значение id передается как параметр в компонент UserPage и можно получить его значение из контекста с помощью getServerSideProps.


Таким образом, маршрутизация в Next.js происходит автоматически на основе файлов в папке pages, и вы можете создавать различные маршруты для вашего приложения.