From the course: Next.js Ecommerce: Build a Shopping Platform from Scratch

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Root layout and constants

Root layout and constants - Next.js Tutorial

From the course: Next.js Ecommerce: Build a Shopping Platform from Scratch

Start my 1-month free trial Buy for my team

Root layout and constants

“

OK, so now we're going to look at groups and layouts. So as I showed you in the first video, this layout.tsx file, this wraps whatever page we're viewing. The page is rendered here in the children prop. And this is where our HTML and body tags and all that stuff go. Now, we can have multiple layouts. And what I want to do is have a root group that will have its own layout. And that root group will have most, I'd say most of the pages, the cart page, the products, the order page, all that stuff. Basically, everything except the admin area. So to create a group, we just simply create a folder in the app folder, and we put parentheses around it. So root, we're going to call it. Now, this doesn't change the route. So for instance, if I didn't have parentheses here, then that folder would pertain to slash root. But since it has parentheses, it doesn't. So if I put, let's say, a folder called cart in the root group, then that's still going to pertain to just slash cart. It's not going to be…

Contents