J2 Marketing
Header Background

We Build Brands

Branding is the process of creating emotional touchpoints with your audience through your website

Let's Talk
Let's Talk

Current Highlight

Changing a Component return for Different Pages - Next.js

If you’re programming a site with a highly stylized design it’s likely some of your components will need to change depending on what page the user navigates to. This could be anything from a text color change to adding completely new elements. I wanted to share a simple navbar component that returns differently based on next/router’s pathname property.


This code can be used to conditionally render two completely different components for each page, it doesn’t have to be the nav specifically 🙂


First let’s import next/router and set up a component function:

[@portabletext/react] Unknown block type "myCodeField", specify a component for it in the `components.types` prop

Next we’re going to set up the router to use in our return:


[@portabletext/react] Unknown block type "myCodeField", specify a component for it in the `components.types` prop

After we do this we can set up our return using the pathname property:


[@portabletext/react] Unknown block type "myCodeField", specify a component for it in the `components.types` prop


We’re using conditional operators to check if the user is on the Our Services page. If they’re not on that page the default will return.

This simple code allows us to create two entirely different navigations based on what page the user navigates to. This gives us a lot of flexibility with what we can display.



💡 Adding the modified component to additional pages


We could call it a day here if we only wanted to see the alternate navbar on a single page, but what if we wanted to see the alternate nav on the blog too? That’s not too hard at all. By modifying the first condition in our operator we can check for multiple pages.


[@portabletext/react] Unknown block type "myCodeField", specify a component for it in the `components.types` prop

Now our special navbar is rendering on the blog page too 🎉


I hope you found this helpful when trying to add a conditional component return on your site. If you have any questions or want to say hi, shoot me an email [email protected]

Read More
Read More

Who We Are

Big City Ambitions. Small City Service.

South Bend is home to 102,700 residents. We are an in-house team because we’re dedicated to providing quality jobs to those who believe in our city. Our goal is to build up South Bend into a nationally recognized city through our creativity and innovation.

Contact Us
Contact Us
We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands
We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands We Build Brands

Clients We've Worked With

Ready to Get Started?

Let's Storyboard

Start Here
Start Here

Blog Posts

What We're Up To

Changing a Component return for Different Pages - Next.js

Web

If you’re programming a site with a highly stylized design it’s likely some of your components will need to change depending on what page the user navigates to. This could be anything from a text color change to adding completely new elements. I wanted to share a simple navbar component that returns differently based on next/router’s pathname property.


This code can be used to conditionally render two completely different components for each page, it doesn’t have to be the nav specifically 🙂


First let’s import next/router and set up a component function:

[@portabletext/react] Unknown block type "myCodeField", specify a component for it in the `components.types` prop

Next we’re going to set up the router to use in our return:


[@portabletext/react] Unknown block type "myCodeField", specify a component for it in the `components.types` prop

After we do this we can set up our return using the pathname property:


[@portabletext/react] Unknown block type "myCodeField", specify a component for it in the `components.types` prop


We’re using conditional operators to check if the user is on the Our Services page. If they’re not on that page the default will return.

This simple code allows us to create two entirely different navigations based on what page the user navigates to. This gives us a lot of flexibility with what we can display.



💡 Adding the modified component to additional pages


We could call it a day here if we only wanted to see the alternate navbar on a single page, but what if we wanted to see the alternate nav on the blog too? That’s not too hard at all. By modifying the first condition in our operator we can check for multiple pages.


[@portabletext/react] Unknown block type "myCodeField", specify a component for it in the `components.types` prop

Now our special navbar is rendering on the blog page too 🎉


I hope you found this helpful when trying to add a conditional component return on your site. If you have any questions or want to say hi, shoot me an email [email protected]