Back

Fundamentals

Project Structure & File System Routing - It's a Whole Mood

Free

Adrian

Next JS Mentor

Get the lowdown on your Next.js project's folders and files. We'll show you how the pages directory is the key to making routes without the extra work.

Project Structure & File System Routing - It's a Whole Mood

Now that you have a Next.js project, let's take a look around. Understanding the project structure is crucial for building anything meaningful.

Key Folders and Files:

* `pages/`: This is where the magic happens. Every file inside this folder automatically becomes a route in your application.

* `pages/index.js` -> This is your homepage (`/`)

* `pages/about.js` -> This is your about page (`/about`)

* `pages/blog/index.js` -> This is your blog's main page (`/blog`)

* `pages/blog/first-post.js` -> This is a blog post (`/blog/first-post`)

* `public/`: This is where you put static assets like images, fonts, and favicons.

* `styles/`: You can put your CSS files here. Next.js supports global styles, CSS modules, and other styling methods.

* `components/`: While not created automatically, it is strongly suggested and the industry standard to create this folder and use it to store your reusable React components.

* `node_modules/`: This is where all your project's dependencies live. You don't usually touch this folder directly.

* `package.json`: This file lists your project's dependencies and other important information.

File System Routing:

This is one of the coolest features of Next.js. You don't have to set up routes manually. Just create a file in the `pages` directory, and Next.js automatically creates a route for it.

Example:

If you create a file called :

`pages/products.js`

…you'll have a page accessible at :

`http://localhost:3000/products`

Dynamic Routes:

You can even create dynamic routes using square brackets `[]` in your file names. We'll cover this in more detail later.

Why is this important?

* Organization: It keeps your project neat and easy to navigate.

* Maintainability: Makes it easier to update and add new features to your app.

* Simplicity: Next.js does the heavy lifting of routing for you.

By the end of this lesson, you'll be comfortable navigating a Next.js project and understanding how the file system routing works.

*****

Complete the following exercises:

1) Create Basic Routes:

Create a new Next.js project using npx create-next-app@latest my-nextjs-practice (or your preferred package manager).
Inside the pages directory, create the following files:
pages/index.js
pages/about.js
pages/contact.js
pages/products/index.js
Add basic content in each file like this:
export default function About() {
  return <h1>About Us</h1>;
}
2) Explore the public Directory:
Create a folder called images inside the public directory.
Place an image file (e.g., logo.png) inside the public/images folder.
In your pages/index.js file, display the image using the <img> tag:
export default function Home() {
  return (
    <div>
      <h1>Welcome to My Website</h1>
      <img src="/images/logo.png" alt="My Logo" />
    </div>
  );
}

*****

QUIZ

1. How do you structurize your project?

1. What is NextJS?

*****

Leave your comments and questions below.

*****