Next.js: How can we have dynamic routing redirect to static pages?

Question

Using Next.js , I currently have an app with a single entry point in the form of /pages/[...slug]/index.ts

It contains a getServerSideProps function which analyses the slug and decide upon a redirection

In some cases a redirection is needed, but it will always be towards a page that can be statically rendered. Example: redirect /fr/uid towards /fr/blog/uid which can be static. In other cases the slug already is the url of a page that can be static.

How can I mix this dynamic element with a static generation of all pages?

Thanks a lot for your help!

floroz · Answer 1 · 2021-04-13T07:07:03.457

If I understood you problem correctly, you cannot use getServerSideProps if you are going to export a static site.

You have two solutions:

Configure your redirection rules in your web hosting solution (i.e. Amazon S3/CloudFront).
Create client-side redirects (when _app.tsx mounts you can check if router.asPath matches any of the redirection you would like to have configured.

Please remember that the first solution is more correct (as 301 redirects from the browser) for SEO purposes.

EDIT: @juliomalves rightly pointed out OP is looking at two different things: redirection, and hybrid builds. However, question should be clarified a bit more to really be able to solve his problem.

Because you will need to host a web-server for SSR, you can leverage Next.js 9.5 built-in redirection system to have permanent server-side redirects.

When it comes to SSR vs SSG, Next.js allows you to adopt a hybrid approach, by giving you the possibility of choosing with Data Fetching strategy to adopt.

I may be wrong but it doesn't look like the OP is exporting a fully static site, as he seems to be using Next.js i18n (can't be used with static export). My guess is that some pages might be static while others are SSR'd. Still a valid point for static export, though. — juliomalves, Apr 12 '21 at 18:35

score 0 · Answer 2 · answered Aug 29 '21 at 14:19

In case you are using AWS CloudFront, then you can redirect with CloudFront Functions.

CloudFront Functions is ideal for lightweight, short-running functions for use cases like the following:

URL redirects or rewrites – You can redirect viewers to other pages based on information in the request, or rewrite all requests from one path to another.

Here is what we are using to redirect clients (e.g. Native App, Google search index, etc.) to new location when NextJS page was moved or removed.

// 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;
}

Next.js: How can we have dynamic routing redirect to static pages?

2 Answers2