Next.js: Как сделать так, чтобы динамическая маршрутизация перенаправляла на статические страницы?

Question

Используя Next.js, в настоящее время у меня есть приложение с единственной точкой входа в виде /pages/[...slugpting/index.ts.

Он содержит функцию getServerSideProps, которая анализирует слаг и принимает решение о перенаправлении.

В некоторых случаях требуется перенаправление, но оно всегда будет направлено на страницу, которая может быть статически отображена. Пример: перенаправить / fr / uid на / fr / blog / uid, который может быть статическим. В других случаях слаг уже является URL-адресом страницы, которая может быть статической.

Как я могу смешать этот динамический элемент со статической генерацией всех страниц?

Большое спасибо за твою помощь!

Answer 1

Если я правильно понял вашу проблему, вы не можете использовать getServerSideProps если вы собираетесь экспортировать статический сайт.

У вас есть два решения:

1. Настройте правила перенаправления в своем решении веб-хостинга (например, Amazon S3 / CloudFront).
2. Создавать перенаправления на стороне клиента (когда _app.tsx монтирует, вы можете проверить, если router.asPath соответствует любому перенаправлению, которое вы хотели бы настроить.

Помните, что первое решение более правильное (поскольку 301 перенаправляет из браузера) для целей SEO.

Answer 2

Если вы используете AWS CloudFront, вы можете перенаправить с помощью CloudFront Functions.

CloudFront Functions идеально подходит для легких, кратковременных функций в следующих случаях использования:

• Перенаправление или перезапись URL - вы можете перенаправлять посетителей на другие страницы на основе информации в запросе или переписывать все запросы с одного пути на другой.

Вот что мы используем для перенаправления клиентов (например, собственного приложения, поискового индекса Google и т. Д.) В новое место, когда страница NextJS была перемещена или удалена.

      // NOTE: Choose "viewer request" for event trigger when you associate this function with CloudFront distribution.

function makeRedirectResponse(location) {
    var response = {
        statusCode: 301,
        statusDescription: 'Moved Permanently',
        headers: {
            'location': { value: location }
        }
    };
    return response;
}

function handler(event) {

    var mappings = [
        { from: "/products/decode/app.html", to: '/products/decode.html' },
        { from: "/products/decode/privacy/2021_01_25.html", to: '/products/decode/privacy.html' }
    ];
    
    var request = event.request;
    var uri = request.uri;
    for (var i = 0; i < mappings.length; i++) {
        var mapping = mappings[i]
        if (mapping.from === uri) {
            return makeRedirectResponse(mapping.to)
        }
    }
    return request;
}