CODEWITHSUNDEEP
reactjsnext.js
Diagathe Josué
Diagathe Josué

Reputation: 12076

Build optionally layouts in NextJS by detecting the browser URL value

all I would try to make some optional layout in NextJS. My problem is that I have found some method to check the browser URL then serve content according to these URL. But by this way the server content an browser content are no longer identical, hence the schema breaks.

Here an snippet of my trial:

export default ({children, title = 'title' }) => {
var 

contact = false;
    if (exenv.canUseDOM ){ if (window.location.href==="http://localhost:4000/contact" ) { contact= true}; } 
else {const contact = false};
    if (contact){ return(  <div>Hey it is contact ! </div> ) } 
else {  // return  normal layout

My console returns me predictably:

Warning: Text content did not match. Server:

So... I'm wondering if I have to make some custom settings on a custom NextJS server to grant the backend/frontend behaviors?

Or maybe there is a less expensive solution in the area?

Any hint would be great,

thanks

Upvotes: 1

Views: 473

Answers (1)

Darryl RN
Darryl RN

Reputation: 8228

You can't remove that warning, it is appear because you just render that layout from client side, so there is a different between layout rendered by server and layout rendered by client.

I don't know what variable exenv.canUseDOM is, but you can use process.browser to detect if the current process is server side rendering or not.

Upvotes: 2

Related Questions