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

@guillermo 

@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, и вы можете создавать различные маршруты для вашего приложения.