Source Freeze

  • Home
  • iOS
  • Swift
  • Cross-Platform
  • About
  • Contact
Home » How to redirect to another page in next js

How to redirect to another page in next js

January 8, 2023 by Source Freeze Leave a Comment

In this tutorial, we will see how to redirect to another page in next js, there are three ways to redirect one page to another page in nextjs.

  1. Using Link in Next.js
  2. useRouter() Hook by using router.push
  3. config.next.js
  4. Middleware

Let’s see each option in a detailed way.

How to redirect to another page in next js

Using Link Component in Next.JS

Using Link component in nextjs it is like a href tag you can just use the href attribute and mention the redirect URL, please refer the below example.

☞ Check out Next.js & React – The Complete Guide (incl. Two Paths!) (Buy now, offer ends in a few hours)

First we need import the Link from the next/link module

import Link from 'next/link';

// ...

return (
  <div>
    <Link href="/new-url">
      <a>Click here to redirect</a>
    </Link>
  </div>
);

How to redirect to another page using useRouter() Hook onclick

We can use the useRouter hook from next/router to get access to the router object in your functional component, and then we can use the push method to navigate to another page on the buttonn onclick event.

Let’s see an example using userRouter in the below.

import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();

  const handleClick = () => {
    router.push('/new-page');
  };

  return (
    <button onClick={handleClick}>Go to new page</button>
  );
}

While clicking the Go to new page button, it will navigate to the /new-page page.

We can also use the router.push method to pass query parameters to the new page, as mentioned in the below example.

import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();

  const handleClick = () => {
  router.push({
  pathname: '/new-page',
  query: {
    name: 'Source Freeze',
    count: 30,
  },
  });
  };

  return (
    <button onClick={handleClick}>Go to new page</button>
  );
}

This will navigate to the /new-page page and pass the query parameters name and count to it.

How to redirect to another page using config.next.js

We can redirect a one to another page using config.next.js but this is fixed redirect mostly it is used for ther permanent redirect it is not a logic based, in some cases you need to get the benefit SEO for the redirection or permanent redirection we will use this approach, please refer the below to redirect to another page using config.next.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
     return [
                {
                    source: '/old-page',
                    destination: '/',
                    permanent: true,
                 },
            ]
    },
}
module.exports = nextConfig

Middleware

Next we can achive the redirection using the Middleware, this middleware redirection we can use the conditional based redirection.

Please refer the beloe example.

import {  NextResponse } from 'next/server'
export function middleware(request) {
if ( request.id === 1 ) {
return NextResponse.rewrite(new URL('/page-1', request.url))
} else if (request.id === 2) {
return NextResponse.redirect(new URL('/page-2', request.url))
} else {
return NextResponse.rewrite(new URL('/not-found', request.url))
}
return NextResponse.next()
}

Here in this tutorial we have seen all the options of redirect to another page in next js.

Thanks for reading also you can refer the below tutorial how to get the query params from the URL in NextJS

☞ Check out Next.js & React – The Complete Guide (incl. Two Paths!) (Buy now, offer ends in a few hours)

Filed Under: javascript, NextJS Tagged With: javascript, nextjs

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Parse Float with 2 decimals in javascript
  • Best Next JS courses to learn Next JS in 2023
  • How to redirect to another page in next js
  • How to get the query parameters from URL in Next JS?
  • iOS DatePicker tutorial (UIDatePicker) using Swift
  • UIAlertController iOS 8 using Swift

Recent Posts

  • Parse Float with 2 decimals in javascript
  • Best Next JS courses to learn Next JS in 2023
  • How to redirect to another page in next js
  • How to get the query parameters from URL in Next JS?
  • iOS DatePicker tutorial (UIDatePicker) using Swift
  • UIAlertController iOS 8 using Swift

Recent Comments

  • zulfi on iOS UIPickerView Example using Swift
  • Muhsin on Cordova InAppBrowser Plugin Example using ionic framework
  • SourceFreeze on Cordova InAppBrowser Plugin Example using ionic framework
  • Muhsin on Cordova InAppBrowser Plugin Example using ionic framework
  • SourceFreeze on Cordova InAppBrowser Plugin Example using ionic framework
  • Muhsin on Cordova InAppBrowser Plugin Example using ionic framework

Tags

cross-platform ionic iOS javascript mobile application development nextjs objective-c swift uiwebview Visual Studio plugin

Copyright © 2023 Source Freeze