From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB

Unlock this course with a free trial

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

File-based routing

File-based routing - Next.js Tutorial

From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB

Start my 1-month free trial Buy for my team

File-based routing

“

All right, so now we're going to get into file-based routing. And this is the documentation here for Next.js routing if you want to check that out. And you don't have to, but you can use it as a supplement. So basically, we're using the app folder structure. There's two ways to do things. There's the older pages folder that you can use, or the newer app folder, which is what we're using. So app is basically the root for our routes. And then we can create subfolders that we want to pertain to specific routes. So let's say I want to have a page or component load when I go to slash properties. Right now, obviously, I get a 404 because that doesn't exist. But I don't have to install React Router. I don't have to write out my routes like you would with a single page application. All I have to do is go into my app folder and create a new folder called Properties, or whatever I want that route to be. And then inside that folder, I'm going to create a file. And I'm going to name it page.jsx…

Contents