🔗 Next.js, Universal and Nuxt.js static redirects

Frameworks like Next.js (React 💙), Nuxt.js (Vue 💚) and Universal (Angular ❤️) allow you to register redirects.

• Next.js allows you to register redirects using redirects function inside next.config.js
• Nuxt.js allows you to register redirects using redirect-module in nuxt.config.js
• Universal allows you to register redirects at server engine router level. e.g. @nguniversal/express-engine

But in all the cases when your app is served, it should stay on top of a nodejs server to handle all the requests.

But I want my application to be a static served application that lives only on client, without a server 😢

Well, this is the single limitation of all the frameworks redirects, but don't be sad, we have a solution, that comes with it's own limitations 😄

Say Hello to HTML Redirections 🚀

From what MDN says, HTML Redirections are a way to make redirects using a meta tag in your HTML head when you don't have control over the server.

Example:

<meta http-equiv="Refresh" content="0; URL=https://example.com/">

This is all we need to know. The 0 in the beginning of the content attribute is the delay in seconds when redirect should happen.

Limitations

• RegExp is not supported, like in server redirects
• Status code cannot be changed
• A small payload delay for fetched HTML

Taking this idea, we can apply it to our frameworks, and create static HTML redirects. Taking into consideration that all frameworks have a folder where you can put your public static assets, we can create html files with our meta tag for redirects.

• Next.js with React uses public folder
• Nuxt.js with Vue uses static folder
• Universal with Angular uses assets folder

Example (Next.js)

Let's say that on my iamandrewluca.com website I want to have addresses that redirect to my social profiles. This is a good example in case that you want someone to fast access your social profile, or in case you change it, Just change the redirect address e.g.

• iamandrewluca.com/dev ➡️ dev.to/iamandrewluca
• iamandrewluca.com/github ➡️ github.com/iamandrewluca
• iamandrewluca.com/twitter ➡️ twitter.com/iamandrewluca
• ...

What I have to do now is to create 3 files in my public folder:

public/dev.html

<meta http-equiv="Refresh" content="0; URL=https://dev.to/iamandrewluca">

public/github.html

<meta http-equiv="Refresh" content="0; URL=https://github.com/iamandrewluca">

public/twitter.html

<meta http-equiv="Refresh" content="0; URL=https://twitter.com/iamandrewluca">

Next we build our static html application:

npm run build # build app
npx next export # export as static html
npx serve out # serve static at http://localhost:5000

Now if I access http://localhost:5000/dev it will automatically go to https://dev.to/iamandrewluca.

• No server
• No JavaScript.

You can check this live example on my simple website iamandrewluca.com

F.A.Q

Why don't do this in javascript with location.href?

If you will do this in JavaScript you will have to wait the whole bundle of Js to load in browser then redirect, this takes time. Read also this article from Kent C. Dodds

What about redirect status code?

Unfortunately using this method you cannot set redirect status code, it will be a simple 200 status code, because it's a html served page.

Why not use hosting service redirects functionality?

If your hosting service supports such thing, sure do. Should be event faster, and you can also change redirect status code

How does browser know to open /dev.html from /dev?

This is not a browser thing, also server deals with this. Most servers have a list of static files to be served by default like: *.html, index.html, index.php and others. Also instead of public/dev.html you can have public/dev/index.html, will have same effect. Use this in case you need nested redirects.

Where is html and head tag from HTML files?

Browsers automatically add these tags. Also less html, faster response.

It is possible to use RegExp to catch multiple routes?

Unfortunately this is not possible.

Bonus 🎁 🧨 🚀

NPM Package that generates automatically HTML files from a JSON file!

Having redirects.json

{
  "redirects": [
    { "from": "/dev", "to": "https://dev.to/iamandrewluca" },
    { "from": "/github", "to": "https://github.com/iamandrewluca" },
    { "from": "/twitter", "to": "https://twitter.com/iamandrewluca" }
  ]
}

And executing:

npx redirects.json out

Will generate all above files. You can add this step as a post build step.

That's all for today! Thanks for reading my blog posts!

Cover Photo by Javier Quiroga on Unsplash