render 2 different components based on view breakpoints in nextjs 13
Unanswered
Gazami crab posted this in #help-forum
Gazami crabOP
I am trying to implement a nextjs 13 app where –based on view breakpoints– I can render 2 different components, for example
but based on nextjs 13 router, I can't have such implementation because the router is already opinionated.
There is a solution for this where I would declare a hook to determine the agent/breakpoints and within each page thereafter I could decide to render e.g. ./ComponentNameDesktop.tsx or /ComponentNamePhone.tsx, though I was looking for a more elegant way where I don't have to check the viewpoint on every page.
Also it would be wholesome (since I'm using nextjs) to be aware of SEO problems that I could face later on
for md-lower breakpoints render components in the app/phone hierarchy
and for md-higher breakpoints render components in the app/desktop hierarchybut based on nextjs 13 router, I can't have such implementation because the router is already opinionated.
There is a solution for this where I would declare a hook to determine the agent/breakpoints and within each page thereafter I could decide to render e.g. ./ComponentNameDesktop.tsx or /ComponentNamePhone.tsx, though I was looking for a more elegant way where I don't have to check the viewpoint on every page.
Also it would be wholesome (since I'm using nextjs) to be aware of SEO problems that I could face later on
7 Replies
@Gazami crab I am trying to implement a nextjs 13 app where –based on view breakpoints– I can render 2 different components, for example
`for md-lower breakpoints render components in the app/phone hierarchy
and for md-higher breakpoints render components in the app/desktop hierarchy`
but based on nextjs 13 router, I can't have such implementation because the router is already opinionated.
There is a solution for this where I would declare a hook to determine the agent/breakpoints and within each page thereafter I could decide to render e.g. ./ComponentNameDesktop.tsx or /ComponentNamePhone.tsx, though I was looking for a more elegant way where I don't have to check the viewpoint on every page.
Also it would be wholesome (since I'm using nextjs) to be aware of SEO problems that I could face later on
I'm not sure im getting your point but conditional rendering and breakpoints are both not related to nextjs or its router.
Conditional rendering has to do with react and breakpoints must be determined using css
Conditional rendering has to do with react and breakpoints must be determined using css
@Clown I'm not sure im getting your point but conditional rendering and breakpoints are both not related to nextjs or its router.
Conditional rendering has to do with react and breakpoints must be determined using css
Gazami crabOP
Thanks for replying @Clown
maybe I didn't convey what I exactly meant.
therefore let me ask you this: is there any way to configure the router of nextjs furthermore? suppose you want to add some abstract layer in your app directory that you don't want it to be routed but you want routing to begin there, how do you proceed this?
e.g. adding
-- app
|
-- abstract
|
-- home
|
page.tsx
how do you make it appear in the url like : https://localhost:3000/home ?
Regards.
maybe I didn't convey what I exactly meant.
therefore let me ask you this: is there any way to configure the router of nextjs furthermore? suppose you want to add some abstract layer in your app directory that you don't want it to be routed but you want routing to begin there, how do you proceed this?
e.g. adding
abstract to the app directory like below-- app
|
-- abstract
|
-- home
|
page.tsx
how do you make it appear in the url like : https://localhost:3000/home ?
Regards.
English Lop
Route groups?
I think you'll have to use something like:
https://nextjs.org/docs/pages/api-reference/next-config-js/basePath
https://nextjs.org/docs/pages/api-reference/next-config-js/basePath
@English Lop Route groups?
English Lop
Is that what you mean?
@English Lop Route groups?
Route groups are a separate concept
Gazami crabOP
I just read the concepts you introduced, I suppose the route groups could do the trick
thank you both @Clown and @English Lop
thank you both @Clown and @English Lop