Nuxt.js: Redirects for SEO

Created on 6 Sep 2017 · 10Comments · Source: nuxt/nuxt.js

Hi, I have a big problem...
I am developing now an e-shop using nuxt and I stuck at the redirections moment.
We have the laravel backend with api and admin-panel, so our SEO department can use SEO module to write a big array of redirects for they needs. All this data stores in the DB.
And I am confused for the right solution to implement these redirects into my SSR+SPA App

Do you have any ideas for the most beautiful solution for this problem?

Thanks for any answer :-)

_{This question is available on Nuxt.js community (#c1421)}

help-wanted

Source

AngelWayfarer

Most helpful comment

@AngelWayfarer

If you really want a pure Nuxt solution, you can use a serverMiddleware

doc: https://nuxtjs.org/api/configuration-servermiddleware

In the following example, I will create a simple json file with all 301 redirections, but you can replace it by a CSV or an API call ;-)

Create a list of 301 redirections in a json file at project root:

// 301.json 

[
  { "from": "/old", "to": "/new" },
  { "from": "/veryold", "to": "/verynew" },
  { "from": "/too-old", "to": "/new" }
]

Create a server middleware for 301 redirect

// servermiddleware/seo.js

const redirects = require('../301.json')

module.exports = function (req, res, next) {
  const redirect = redirects.find(r => r.from === req.url)
  if (redirect) {
    console.log(`redirect: ${redirect.from} => ${redirect.to}`)
    res.writeHead(301, { Location: redirect.to })
    res.end()
  } else {
    next()
  }
}

Add the server middleware in your config file:

// nuxt.config.js

module.exports = {
  serverMiddleware: [
    '~/servermiddleware/seo.js'
  ],
 ...
}

Run your server & enjoy 👍

NicoPennec on 12 Sep 2017

👍11 🎉5

All 10 comments

Use Nginx before nuxt instance.

You can use cron to create redirect rules every x minuts or use some more sophisticated solution like lua+redis

awronski on 6 Sep 2017

Thanks, it is a good idea, but maybe there is more nuxt-way solution?
Because I have only my app and the api.. ((

AngelWayfarer on 6 Sep 2017

I extended router prop inside of nuxt.config.js like following:

router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'page',
        path: '*',
        component: resolve(__dirname, 'src/pages/index.vue')
      })
    }
  },

Every request which is not handled by the folders of Nuxt are then send down to index.vue and there I handle each request - forward them or simply redirect to the 404 page. You can handle the logic either in fetch({route}) or on created hook - thats up to you. Not sure if this solution covers your usecase as well.

dohomi on 7 Sep 2017

@AngelWayfarer

If you really want a pure Nuxt solution, you can use a serverMiddleware

doc: https://nuxtjs.org/api/configuration-servermiddleware

In the following example, I will create a simple json file with all 301 redirections, but you can replace it by a CSV or an API call ;-)

Create a list of 301 redirections in a json file at project root:

// 301.json 

[
  { "from": "/old", "to": "/new" },
  { "from": "/veryold", "to": "/verynew" },
  { "from": "/too-old", "to": "/new" }
]

Create a server middleware for 301 redirect

// servermiddleware/seo.js

const redirects = require('../301.json')

module.exports = function (req, res, next) {
  const redirect = redirects.find(r => r.from === req.url)
  if (redirect) {
    console.log(`redirect: ${redirect.from} => ${redirect.to}`)
    res.writeHead(301, { Location: redirect.to })
    res.end()
  } else {
    next()
  }
}

Add the server middleware in your config file:

// nuxt.config.js

module.exports = {
  serverMiddleware: [
    '~/servermiddleware/seo.js'
  ],
 ...
}

Run your server & enjoy 👍

NicoPennec on 12 Sep 2017

👍11 🎉5

@NicoPennec Thanks for your usefull answer!!!
I will try it soon.
Maybe you can help me with another problem.
I had two apps.
Nuxt frontend + Laravel Backend(API + Admin-panel)

When the admin/content manager uploads some files or images from the admin-panel - they save into /public/uploads/ folder in the laravel app.

How can I serve all the static images??
I want to use paths without domain name like '/images/myImage.jpg'
And show thee image stored in http://MYAPPNAME.com/uploads/myImage.jpg

I think that it can be with some magic with the serveerMiddleware :-)

Thanks for your answer :-)

AngelWayfarer on 12 Sep 2017

For this kind of stuffs, I prefer use a proxy from Nginx / Apache /...

But, Nuxt ServerMiddleware is based on the Connect project.
And Connect has a Server-Static handler from Express team.
You can try it.

An extract from Nuxt doc:

https://nuxtjs.org/api/configuration-servermiddleware#usage :wink:

// nuxt.config.js

const serveStatic = require('serve-static')

module.exports = {
  serverMiddleware: [
      { path: '/static2', handler: serveStatic(__dirname + '/static2') }
  ]
}

NicoPennec on 12 Sep 2017

Thanks a lot!!!
I found it in the doc, but I was not sure if it be suitable for my problem. But if you say that it can work, so I will read the docs more deep 😉

AngelWayfarer on 12 Sep 2017

I've never played with the server middleware before your issue.
I wanted to test it because I thought you had a very relevant question :+1:
Massive redirective 301 is very common for SEO ;-)

NicoPennec on 12 Sep 2017

👍1

How can I do with dynamic routes?