How to redirect to an external URL in Next.js
In this tutorial, we are going to learn about how to redirect a user to an external URL in Next.js.
Redirects allow you to redirect an incoming request from the user (/about) to a different destination (https://google.com/about/).
Redirecting to an external URL
We can redirect to an external URL in Next.js by adding the following config to our next.config.js
file.
Here is an example:
module.exports = {
async redirects() {
return [
{
source: '/about',
destination: 'https://google.com/about',
permanent: false
}
];
}
};In the example above, if any user visits the /about page in our next.js app we are redirecting them to an external URL https://google.com/about.
We can add more redirects to the redirects() async function like this.
module.exports = {
async redirects() {
return [
{
source: '/about',
destination: 'https://google.com/about',
permanent: true
},
{
source: '/contact',
destination: 'https://twitter.com',
permanent: true
}
];
}
};Note: To use redirects(), your next.js version should 9.5.0 or above.
Similarly, we can also redirect to an external URL using the window.location.href property inside the useEffect() hook.
Example:
import React, { Component, useEffect } from "react";
function About() {
useEffect(() => {
window.location.href = "https://google.com/about";
}, []);
return (
<div>
<h1>This page is not available</h1>
<p>You are redirecting to google.com/about</p>
</div>
);
}
export default About;- Share:
