How to use Configuration setting In Next.js
Next.js provides us a Configuration file named next.config.js, Which can be also used to define a static redirect. This static redirect is useful where the redirection remains constant and doesn’t depend on dynamic user input or server-side logic. This approach is beneficial for directing users from outdated URLs to updated ones.
We can define a static redirecting using the redirects property. In below example, if user tries to access “/” route then it will redirect to “/about” route.
Example: The below example demonstrate the use of configuration setting
//next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
async redirects() {
return [
{
source: '/',
destination: '/gfg',
permanent: false,
},]
},
};
export default nextConfig;
//page.js (gfg directory)
export default function Page() {
return (
<>
<h1>w3wiki</h1>
</>
)
}
Output:
How to Redirect in Next.js ?
NextJS is a React framework that is used to build full-stack web applications. It is used both for front-end as well as back-end. It comes with a powerful set of features to simplify the development of React applications. In this article, we will learn about How to Redirect in NextJS with different approaches.
We will discuss different approaches to Redirect in NextJS:
Table of Content
- Using Redirect method
- Using Configuration setting
- Using Router Push method
- Using Next Response
Contact Us