CODEWITHSUNDEEP
staticrenderingnext.jsurl-routinggetstaticprops
Sébastien
Sébastien

Reputation: 5463

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

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!

Upvotes: 0

Views: 3497

Answers (2)

Vlad
Vlad

Reputation: 6732

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

Upvotes: 0

floroz
floroz

Reputation: 413

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

You have two solutions:

  1. Configure your redirection rules in your web hosting solution (i.e. Amazon S3/CloudFront).
  2. 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.

Upvotes: 0

Related Questions