Getting the current url on the client side in next.js

Question

So I am working on a nodejs app which I will have my new website on and I want to make a way for my user on the clientside to display different things, re-renderd depending on what the user is pressing on. My idea is that for example firstly the user would see "Please select a tool first" and then the user will select a tool in the navbar which then the page will be re-renderd and display the tool selected inside a jumbotron with the url being changed for example then /admin/[ToolSelected].

The only thing is tho that I do not know how to achieve this. I was thinking that the client side code could detect what the url is and is placed as a page variable then the tool will displayed with a IF statement depending on what the page variable is.

Would my theory work or how can a achieve this in an efficient way?

Here is my main page code:

// Including Navbar and css
import AdminLayout from '../comps/admin/adminLayout'

// the so called "tools" more will exist in the future
import Passform from '../comps/admin/tools/passform'


// Fetching the current url the user is on
var page = CURRENT_URL;


const jumbotron = {
  background: 'white'
}

const Admin = (page) => (

  <AdminLayout>

  <style global jsx>
  {
    `body {
      background: #eff0f3;
    }`
  }
  </style>
    <div className="jumbotron" style={jumbotron}>

    {(page == "passform") ? (
      <Passform/>
    ) : (
      <h3>Something is wrong :/ . {page}</h3>
    )}

    </div>
  </AdminLayout>
)

export default Admin

felixmosh · Accepted Answer · 2023-08-27 09:53:16Z

21

You can wrap your component with withRouter HOC, that will inject the router object, that has current pathname.

import { withRouter } from 'next/router';

const Admin = ({ router }) => (
  <AdminLayout>
    <style global jsx>
      {`
        body {
          background: #eff0f3;
        }
      `}
    </style>
    <div className="jumbotron" style={jumbotron}>
      {router.pathname == 'passform' ? <Passform /> : <h3>Something is wrong :/ . {page}</h3>}
    </div>
  </AdminLayout>
);

export default withRouter(Admin);

Using Hooks

If you prefer hooks you can use useRouter hook.

import { useRouter } from 'next/router';

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

return (
  <AdminLayout>
    <style global jsx>
      {`
        body {
          background: #eff0f3;
        }
      `}
    </style>
    <div className="jumbotron" style={jumbotron}>
      {router.pathname == 'passform' ? <Passform /> : <h3>Something is wrong :/ . {page}</h3>}
    </div>
  </AdminLayout>);
};

export default Admin;

router.pathname will contain the "config" url, therefore for dynamic routes, it will contain the [paramName] parts.

Dynamic routes

You can check the router.query for the existing of the dynamic part.

import { useRouter } from 'next/router';

// assume that your dynamic route us `/static/[dynamicPart]`

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

return (
  <AdminLayout>
    <style global jsx>
      {`
        body {
          background: #eff0f3;
        }
      `}
    </style>
    <div className="jumbotron" style={jumbotron}>
      {router.query.dynamicPart == 'passform' ? <Passform /> : <h3>Something is wrong :/ . {page}</h3>}
    </div>
  </AdminLayout>);
};

export default Admin;

edited Aug 27, 2023 at 9:53

answered Feb 23, 2019 at 21:20

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Colin Burke Over a year ago

I think you want import {withRouter } from 'next/router';

Davey Over a year ago

I'm not sure why the downvotes? import {withRouter} from 'next/router'; is now part of the answer. That along with export default withRouter(Admin); worked great. PS. React inspector was a quick way to check.

JGallardo Over a year ago

Downvoting because this is not a usable example, removes some of the details from the question which makes this more clear, and lacks depth in explanation about what is actually happening here.

felixmosh Over a year ago

I’ve changed the implementation to use router.pathname

Connor Leech Over a year ago

when i do that for a dynamic route it ends up being a url like /mypage/[slug]. Anyone know how i can get the value of the slug? i.e. the actual URL

|

anastymous · Accepted Answer · 2023-07-18 05:29:04Z

3

NextJS 13 with the AppDir router

https://nextjs.org/docs/app/api-reference/functions/use-pathname

'use client'
 
import { usePathname } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Current pathname: {pathname}</p>
}

answered Jul 18, 2023 at 5:29

anastymous

4875 silver badges16 bronze badges

Collectives™ on Stack Overflow

Getting the current url on the client side in next.js

2 Answers 2

Using Hooks

Dynamic routes

6 Comments

NextJS 13 with the AppDir router

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Using Hooks

Dynamic routes

6 Comments

NextJS 13 with the AppDir router

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related