What I want to build next is our marketing or landing page. And while we do that, we're also going to learn about route groups and how to reuse layout components. So let's go ahead and do the following. We learned that once we create a new folder like buttons and put page.tsx inside that will turn it into a route. But what if you want to create a folder which is purely organizational and should never, even if I put page.tsx inside of it, put that folder name in the URL.
Well, we can do that. So no, you don't have to keep your root page.tsx inside of the app folder. Instead, you can do something like this. I'm gonna create a new folder here and I'm gonna call it marketing. And inside of that I'm going to drag and drop my page.vsx component.
And now let's go ahead and try and go back to localhost 3000. As you can see nothing has changed. So this is a marketing page. There we go. So I successfully moved my page.tsx from the app folder inside of this marketing folder, but my URL for the root page hasn't changed.
So that's what I want to achieve with this route groups. So route groups are folders which can still be used to render routes by using the reserved page.psx file but the difference is if you wrap them in parentheses that means that this part will not be part of the URL. So it's very useful for organizing your routes. Another thing that is very useful is that you can also create a layout file inside of it. So layout files are similar to page files in a sense that they are a reserved file name.
They also need to have a default export inside of them. But there's a catch. So let's go ahead and do the following. I'm gonna write marketing layout here. And very simply I'm going to return a div and I'm going to write layout.
And then export default marketing layout. Once I save this file the error is gone but my page seems to have disappeared. We can only see the layout text. That is because in order to make these layout files functional We actually have to add a children prop. So let's write type props here and let's write children to be a type of react react node.
Also a quick tip, if you don't know, you don't have to import react in a file when working in Next.js. So let's assign this props here so we have type safety and let's extract the children and now instead of rendering this let's render children instead and there we go. Now we can see a page inside. So what did we actually achieve with this layout.psx? Well, you're going to see that in a moment.
So what we can do now is we can define a reusable layout, which is going to wrap any of the children inside of this layout. So what does that exactly mean? Well let's go ahead and do the following. Let's give this div a class name of MinHScreen and flex and flexCore. And let's give it a background of red500 so we can test out whether it's actually taking a hundred percent of my screen.
Great! So now that we know it's taking up a hundred percent we can go ahead and remove the background color. Now what I want to do is wrap my children inside of a main element. And then I'm going to give this main element a class name of flex1, flex, flex, column, items, center, and justify, Center. There we go.
So you can see that now every page or route that I create inside of this marketing folder will have the exact same outer layout. So if I create a new folder for example frequently asked questions and inside a page.tsx and if I go ahead and return this frequently asked question page not pages like this and I will just return a div, frequently asked questions page and now if I go to localhost 3000 slash faq you can see that it has the exact same styles but if I move the FAQ page in the app folder for example, now it doesn't have those styles. So that's what the layout file is useful for in a combination with a route group. So I'm going to remove this FAQ file completely and now we have these errors in this page but we can close that. So this is that .next folder that I was talking about and I showed you how you can resolve that.
So you can just save that unsaved file. Let's go back to our localhost 3000 and let's demonstrate how this layout can be used even more effectively. So above the main element here I'm gonna add a header component and let's go ahead and create this component header.tsx and instead of exporting this as default let's do export const header because this is a component, not a page and I prefer named exports when it comes to components. So in here I'm gonna go ahead and I'm very simply gonna return a header element. I'm gonna give it a class name of height 20, full width, border bottom 2, border slate 200 and px of 4 And I'm going to write out header inside.
Then I'm going to go back to the layout and I'm going to import this header from .slash header and there we go you can now see how I have a header component inside of here so if I were to create again for example I don't know a docs here page and inside page.vsx so you don't have to do this I'm just demonstrating here so docs page docs page and if I go to localhost 3000 slash docs you can see that Docs also has a reusable header. So the question is when I changed from localhost 3000 to slash docs did this header component to re-render? Well no, because layout file ensures that what is inside of it will not be re-rendered by the children re-rendering themselves. So that's another thing this layout files are really useful for. So now I'm gonna remove this docs page, we are not going to need it, but besides the header I also want to prepare a footer component.
So I'm gonna go ahead and go inside of a footer, export const footer here, and let's return a... Not a div, let's return a footer with a class name of hidden, lg-block, height of 20, pool width, border top of 2, border slate of 200 and padding 2. And let's render our footer. And you might have noticed that I have given it a default class name of hidden, which means on mobile devices our footer is not going to be visible but when it reaches a large screen which begins with a min width of a 1024 pixels that's when we are going to render the footer. So let's go back inside of our layout and let's go and below the main element render the footer from .slash footer.
So now go back to localhost 3000 here and if you expand you should see the footer and if you go on to mobile mode or basically just lower than LG, you can see how the footer disappears. Perfect. So we have prepared the skeleton for our landing page. What we're going to do next is we're going to add a logo here. We're going to add some authentication options, a nice hero image, we're going to detect whether the user is logged in or not so we can give them a different message like continue or register and in the footer we're going to go ahead and simply display some flags which are the courses we offer inside of our application.
Great, great job!