1

I don't get how it is possible to have different layouts on the same page in Next.js 13 with the /app directory.

Let's say we are at the root http://example.com and we want to display a layout if the user is authenticated and another if not.

How to achieve this?

Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65
JeanJacquesGourdin
  • 1,496
  • 5
  • 25
  • Does this answer your question? [Next JS 13 - Remove layout for specific page](https://stackoverflow.com/questions/76230464/next-js-13-remove-layout-for-specific-page) – Emre May 18 '23 at 16:57
  • @Emre Thanks but not ideal at all. If you do that then all your app is client side. Because you make a client component at the root (root child to be exact). This is the worst SEO practice. Am I wrong ? – JeanJacquesGourdin May 18 '23 at 17:04
  • You might be right but RootLayout still runs on server-side because it must be a server component. You can test it with `console.log()` method. I am not sure exactly. Actually I didn't get the question completely. I've built authenticated page before but didn't use that way. – Emre May 18 '23 at 17:15
  • @Emre I just want to know how to display layout conditionally based on if the user is authenticated – JeanJacquesGourdin May 18 '23 at 17:45
  • Does this answer your question? [Exclude a page from the Next.js root layout in the app folder](https://stackoverflow.com/questions/76251099/exclude-a-page-from-the-next-js-root-layout-in-the-app-folder) – Youssouf Oumar May 18 '23 at 17:48
  • @YoussoufOumar No it does not as such. If i follow that, and create ```(general)``` and ```(auth)``` folders with both of them their ```page.jsx```. How to send a user to ```http://example.com/(general)/page.jsx``` or ```http://example.com/(auth)/page.jsx``` ? (I get that both url should be displayed as ```http://example.com``` in the browser, that's the main goal of this question) – JeanJacquesGourdin May 18 '23 at 18:05
  • Yeah, actually route group should not resolve to the same URL. How are you authenticating the user? Can you show your layout code? And speaking of the previous comments, [not because your layout is client, it means all the website will be](https://stackoverflow.com/questions/75801266/does-a-client-layout-make-everything-client-if-so-how-to-add-client-interactiv). – Youssouf Oumar May 18 '23 at 18:19
  • 1
    @YoussoufOumar Yeah i remembered that from your comment on my previous question. I need to pass only children. For now it's boilerplate code. I guess i'll use Emre first comment and pass children. I guess it's good enough this way – JeanJacquesGourdin May 18 '23 at 18:24
  • @YoussoufOumar Man my, I went for what i said and I'm a bit confused. Could check https://stackoverflow.com/questions/76294320/next-js-13-context-api-conditional-layouts-and-seo-optimization please ? – JeanJacquesGourdin May 20 '23 at 08:57

0 Answers0