How can display pages with different states based on query parameters in next.js

Question

I want to display pages with different states based on different query params in next.js , so that when a user uses a link with query param , It should not show the default page , but based on the state.

For simplicity Coinsider the home page as localhost:3000 This renders some default text 'Hello user' If user enters localhost:3000/?name=JohnDoe This should render Hello JohnDoe.

Things I have tried . I am able to add the query param using event handler's via next router . router.push('/?name=JohnDoe) But I dont know of a solution to set the state when the user enters the page directly using the a link with query params

https://github.com/hussamkhatib/tap check this file components/students.tsx — Hussam Khatib, Jul 29 '21 at 10:55

score 0 · Answer 1 · answered Jul 25 '21 at 13:35

0

You can access the query in getServerSideProps and then redirect or do whatever you want with that query :

const getServerSideProps = (ctx) => {
   const {params} = ctx;
   
   if(params){
     return {
        redirect: {
        permanent: false,
        destination: "/login",
     }
   }
}

answered Jul 25 '21 at 13:35

Mehdi Faraji

2,574
8
28
76

1

I am not using getServerSideProps as I want to redirect from the component and not the page. – Hussam Khatib Jul 29 '21 at 10:41
@HussamKhatib with next js you can redirect to another page by using this method . – Mehdi Faraji Jul 29 '21 at 11:53

score 0 · Answer 2 · answered Nov 23 '22 at 09:57

To read query params, you should use router.query.

Here is an example that would render 'Hello user' on localhost:3000, and 'Hello JohnDoe' on localhost:3000?name=JohnDoe

import { useRouter } from 'next/router';

const Page = () => {
  const router = useRouter();

  const userName = router.query.name ?? 'user';

  return <div>Hello {userName}</div>;
};

export default Page;

How can display pages with different states based on query parameters in next.js

2 Answers2