Next.js Functions: redirect
Last Updated :
29 Jul, 2024
Next.js 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. One of its features is redirect Function. In this article, we will learn about redirect Function.
The redirect function in Next.js is used to redirect users from one URL to another. It can be used in various contexts such as Server Components, Client Components, Route Handlers and Server Actions. permanentRedirect can either insert a meta tag for client-side redirection or serve an appropriate HTTP redirect status code response.
Syntax:
import { redirect } from 'next/navigation';
// Usage
redirect(path, type);
Where:
- path(string): It is a path where we are redirecting the user. it can be relative or absolute path.
- type: It is used to give type of redirect. the value can be a "replace" or "push". replace, It replaces the current URL in the browser history stack. push, It adds a new entry to the browser history stack.
Steps to Create Next.js Application
Step 1: Create a Next.js application using the following command.
npx create-next-app@latest gfg
Step 2: It will ask you some questions, so choose as the following.
Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... No
√ Would you like to customize the default import alias (@/*)? ... Yes
Step 3: After creating your project folder i.e. gfg, move to it using the following command.
cd gfg
Project Structure:
Project structure Example: The below example demonstrate the use of redirect function in next.js.
JavaScript
// File path: src/app/page.js
"use client";
import {redirect, useRouter} from "next/navigation";
export default function Home()
{
const router = useRouter();
const isRedirect = true
if (!isRedirect)
{
redirect("/profile")
}
return (
<>
<h1>GeeksForGeeks | Next.js Redirect Function</h1>
<button onClick={() => router.push('/profile')}>Profile Page</button>
</>
);
}
JavaScript
// File path: src/app/profile/page.js
"use client";
import {useRouter} from "next/navigation"
export default function Profile()
{
const router = useRouter()
return (
<>
<h1>Profile Page</h1>
<button onClick={() => router.back()}>
Back to previous page
</button>
</>
)
}
To run the Application open the terminal in the project folder and enter the following command:
npm run dev
Output:
Similar Reads
Next.js Functions: permanentRedirect Next.js is a React framework that is used to build full-stack web applications. It comes with a powerful set of features to simplify the development of React applications. One of its features is permanentRedirect Function. In this article, we will learn about permanentRedirect Function.What is perma
3 min read
Next.js Redirects Next.js Redirects means changing the incoming source request to the destination request and redirecting the user to that path only. When the original web application is under maintenance, the users browse or access the web application, and we want to redirect the user to another web page or applicat
4 min read
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
4 min read
Express.js res.redirect() Function In Express.js, the res.redirect() function is one of the most commonly used methods to handle redirection in a web application. This method is part of the response object (res), and it allows you to send an HTTP redirect to the client, telling it to navigate to a different URL.What is Redirection?In
4 min read
Underscore.js _.isFunction() Function The _.isFunction() function is used to check whether the given object is function or not. It returns a Boolean value True if the given object is a function and returns False otherwise. Syntax: _.isFunction( object ) Parameters: This function accepts single parameter as mentioned above and described
1 min read
Functions in JavaScript Functions in JavaScript are reusable blocks of code designed to perform specific tasks. They allow you to organize, reuse, and modularize code. It can take inputs, perform actions, and return outputs.JavaScriptfunction sum(x, y) { return x + y; } console.log(sum(6, 9)); // output: 15Function Syntax
5 min read