Keep your login page and user homepage on the same URL
Let's suppose you are creating the website of a social network called thenewsocialnetwork.com. This is the base URL of your website, which means that you want it to render the landing page when people go there. But, if we are talking about a logged user, we should render their homepage, in this case the user feed with specific data. So, we are talking about different pages within the same route, or page conditional rendering. However, we are talking about what the Next.js documentation called Parallel Routes, a concept that is very well-documentated, in which the applications go beyond what we are going to discuss here. The purpose of this article is to address a common scenario, extract the complexities of authentication, and analyze it through the lens of parallel routes, a fundamental concept in Next.js 13.
How routes are defined in Next 13
The route definition is quite straightforward, but the documentation does a better job than I could possibly do here. So, understand how the routes are defined and how it renders pages and layouts then come back here so we can make a practical example.
Conditional rendering inside layouts
As you might have read, the Layout is a part of the UI shared between multiple pages. Let's take this Layout as example:
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<body>{children}</body>
</html>
);
}
It may look confusing to use this structure since we are not calling something like
<RootLayout> <h1>Root Layout's children</h1> </RootLayout>
anywhere in our code. Next is doing this under the hood, like a magic trick. Actually, what is passed by default as children is the page.js you defined in the same directory level of this Layout. The good thing is that we are not restricted to what is received as children in the Layout component. We can send different page files to Layout and create some logic to render them depending on specific conditions, in our case, whether the user is logged in or not..
To create these alternative pages, we have to create a new folder at the Layout's directory level called slots following the @folder convention.
Here's how our app directory will look like: app/
├─ @logged/
│ ├─ page.tsx
layout.tsx
page.tsx
Now, the Layout component, will receive the logged page as props:
export default function RootLayout({
children,
logged,
}: {
children: React.ReactNode;
logged: React.ReactNode;
}) {
/* the authorization logic was extracted.
Switch it to "true" and see a completely
different page being rendered inside the Layout*/
const isLogged = false;
return (
<html>
<body>{isLogged ? logged : children}</body>
</html>
);
}
Try it yourself and create a page for when the user is logged in and another for when it's not.
