Serverless-next.js: Next 9.5 redirection features not working

[futuraprime]

Describe the bug
I'm trying to use the new redirection features in Next 9.5, but they don't seem to work with Serverless-Next.js. Specifically, trailing slashes and redirects. Are these not supported yet?

To Reproduce
I've added these options to next.config.js:

const nextConfig = {
  target: 'serverless',
  trailingSlash: false,

  // The main page is actually just a redirect
  async redirects() {
    return [
      {
        source: '/path',
        destination: '/path/more',
        permanent: true,
      },
    ];
  },
};

Expected behavior
These work as expected on the local dev server. http://localhost/path redirects to http://localhost/path/more, and http://localhost/path/more/ redirects to http://localhost/path/more. However, deployed with serverless-next on AWS, these pages return 404 errors.

Versions

• OS: MacOS 10.15.5
• Node: 12.x (on AWS Lambda); 12.16.3 (local)
• Next: 9.5.1
• Serverless-Next: 1.17.0-alpha.1

[dphang]

For trailing slash redirects (trailing slash -> non-trailing slash), see: https://github.com/serverless-nextjs/serverless-next.js/issues/479#issuecomment-653158270. I think there was a PR to do this but it was closed since Next.js did not support these redirects at the time. Now it does (plus the inverse, non-trailing slash -> trailing slash redirect).

As mentioned in the comment, a similar PR will be needed but it should also read trailingSlash value in next.config.js to determine which of the two behaviors to use.

Not sure if anyone was already working on it?

You can also do the redirect on client side by adding the following code (or similar) to _app.tsx/_app.jsx before returning any other elements:

  if (router.asPath.length > 1 && router.asPath.endsWith("/")) {
    const urlWithoutEndingSlash = router.asPath.replace(/\/*$/gim, "");

    if (typeof window !== "undefined") {
      window.location.replace(urlWithoutEndingSlash);
    }

    return null;
  }

Note this will first make a request to the trailing slash path (resulting in 404 response) and then the path without trailing slash (200 response), but it will be transparent to the user as they won't see any 404 page, just empty content until the router replaces the path.

For rewrites I think it it not supported either yet: https://github.com/serverless-nextjs/serverless-next.js#features

[dphang]

I created a PR for trailingSlash support: https://github.com/serverless-nextjs/serverless-next.js/pull/556

[benjipott]

@dphang , i think @futuraprime talk about rewrites and redirects feature in _next/routes_manifest.json
https://nextjs.org/docs/api-reference/next.config.js/rewrites

very usefull if lambda can redirect and rewrites somes routes

by the way, trailingSlash work like a charm

[dphang]

Yep, they mentioned trailing slash so at least that one is supported now.

For custom redirect/rewrites/headers it looks like they have same underlying logic as they do path matching in similar way e.g with regex patterns. Seems like a good feature to add next, probably best to create general RFC/design doc for that so we do not have any perf issues, I can try to consolidate that later this week.

[benjipott]

This feature very usefull for redirect or custom languages like i18N.

the architecture in route manifest is like this :

first one used for trailing slash by default

"redirects": [
    {
      "source": "/:path+/",
      "destination": "/:path+",
      "statusCode": 308,
      "regex": "^(?:/((?:[^/]+?)(?:/(?:[^/]+?))*))/$"
    },
    {
      "source": "/source-redirect/:path*",
      "destination": "/destination-redirect/:path*",
      "statusCode": 308,
      "regex": "^/source-redirect(?:/((?:[^/]+?)(?:/(?:[^/]+?))*))?$"
    }
  ],
  "rewrites": [
    {
      "source": "/lang/:path*",
      "destination": "/:path*",
      "regex": "^/lang(?:/((?:[^/]+?)(?:/(?:[^/]+?))*))?$"
    }
  ],

[dphang]

Tracking in: https://github.com/serverless-nextjs/serverless-next.js/issues/587. I'll close this in favor of that.