How to catch a route and redirect to Another Page in Nuxt 3

Question

I have a website that I have rebuilt using Nuxt 3. Backlinks exists on numerous platforms and I need the old links to point to the new pages. Example: old(website.com/contact.html) new(website.com/contact)

I tried using middleware, but after deploying it, I get this error: 502 Error decoding lambda response

In my middleware/redirect folder I have this:

const redirects = [{
    'from' : '/contact.html',
    'to' : '/contact'
}]

export default function (req, res, next) {
    const redirect = redirects.find((r)=> r.from === req.url)

    if (redirect) {
        res.writeHead(301, { Location: redirect.to })
        res.end()
    } else {
        next()
    }
}

It works locally but not after deploying to netlify!

and I added this to my nuxtconfig file:

    serverMiddleware: [
        '~/middleware/redirect'
    ]

I thought that this middleware would act as a net to catch any req to the old contacts.html page and redirect them to the new contact page. but instead it sends that lambda error which I looked around and have not found a solid fix for. I am open to any solution including a different way of redirecting! Thank you!

The best would probably be to make the redirects directly on the platform itself (before it even reaches your app) with a rule so that it matches what you had before and what you have now in Nuxt. — kissu, Dec 28 '22 at 22:23
I agree its a better solution to change the links directly. I was just trying to save a bit of time and effort because some of the backlinks are in blogs/articles on other peoples websites. — Kyrony, Dec 29 '22 at 00:54

score 10 · Accepted Answer · answered Mar 11 '23 at 01:41

10

You can achieve redirections without middlewares by using the redirect option inside routeRules in nuxt.config.ts as below:

export default defineNuxtConfig({
    routeRules: {
        '/contact.html': { redirect: '/contact' },
        '/external-route': { redirect: 'https://example.com' },
    },
})

you can also define a new route that can be redirected to any internal or external page.

More rules options can be found here: https://nitro.unjs.io/config/#routerules, which mentioned in the official doc

answered Mar 11 '23 at 01:41

moghwan

1,829
2
17
29

Is it possible to reroute multiple pages like so? /contact/** to https://example.com/** – Mathijs Jul 17 '23 at 15:43
Do you also know how to keep the query parameters? This way they get lost. – Mathijs Jul 17 '23 at 15:44

Felix Eklöf · Answer 2 · 2022-12-29T08:09:11.513

Instead of building your own middleware, you can add your own router options. Here are the docs.

Create a folder called app in the root of your project (same folder as nuxt.config.ts.
Inside/app create file router.options.ts.
Inside router.options.ts write:

import type { RouterOptions } from '@nuxt/schema';

// https://router.vuejs.org/api/interfaces/routeroptions.html
export default <RouterOptions>{
  routes: (_routes) => [
    {
      name: 'contact',
      path: '/contact',
      component: () => import('~/pages/contact.vue'),
      alias: '/contact.html',
    },
  ],
};

EDIT: You could also use definePageMeta with alias. Docs.

Even tho this is a viable solution, it's more of a front-end one (client-side navigation) and not related to server-side/DNS redirections. — kissu, Dec 28 '22 at 23:32

How to catch a route and redirect to Another Page in Nuxt 3

2 Answers2