Exploring the Next.js File Structure

1. Introduction

In this tutorial, we will explore the file structure of Next.js, a powerful, server-side rendering (SSR) framework based on React. You will learn about the different files and directories in a typical Next.js project and gain an understanding of their roles and purposes.

Prerequisites: Basic knowledge of JavaScript and React.js is recommended. Experience with Node.js can be helpful but is not necessary.

2. Step-by-Step Guide

When you create a new Next.js project using the create-next-app command, it generates a specific file structure. Let's go through the main components:

• pages/: This directory is special in Next.js. Every file in the pages directory becomes a route that gets automatically processed and rendered.
• public/: This directory is used to serve static assets such as images, scripts, or styles.
• styles/: This directory is for global styles. Next.js comes pre-configured with CSS and Sass.
• package.json: The package.json file is crucial in any JavaScript project. It contains the list of dependencies and scripts for your project.
• next.config.js: This is a configuration file for Next.js. It's optional and is used to extend the default configurations.

3. Code Examples

Let's take a deeper look at some of the key directories and files:

3.1 pages/ directory

Any JavaScript or TypeScript file inside the pages directory will automatically become a route in your Next.js application. For example:

// pages/index.js
import React from 'react';

const Home = () => (
  <div>
    <h1>Welcome to Next.js!</h1>
  </div>
);

export default Home;

The above code will be served as the main page of your website (i.e., '/'). The function Home returns a simple JSX that displays a welcome message.

3.2 public/ directory

The public directory is where you put any static files that you want to serve directly. For example, if you add an image at public/my-image.jpg, it will be accessible at the '/my-image.jpg' URL.

3.3 styles/ directory

The styles directory is for global CSS files. All CSS files here are automatically concatenated and minified in production. Here's an example of a CSS file:

/* styles/Home.module.css */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

This CSS module can be imported and used in your React components.

4. Summary

In this tutorial, we have explored the basic file structure of a Next.js project. You have learned about the role of the pages, public, styles, package.json, and next.config.js files and directories.

Next steps could include exploring Next.js routing in more detail, learning about API routes, or understanding the getStaticProps and getServerSideProps data fetching methods.

5. Practice Exercises

1. Create a new Next.js app and explore the file structure. Can you identify all the files and directories we discussed?
2. Create a new route in the pages directory. What URL does this correspond to in your app?
3. Add an image to the public directory and display it on your new page.

Solutions:

1. Use the command npx create-next-app@latest my-app to create a new Next.js app. This will create a new directory called my-app with all the files and directories we discussed.
2. If you create a file called about.js in the pages directory, this would correspond to the '/about' URL in your app. The file could look something like this:

// pages/about.js
import React from 'react';

const About = () => (
  <div>
    <h1>About us</h1>
    <p>This is the about page.</p>
  </div>
);

export default About;

1. To display an image, you could add a file called logo.jpg to the public directory and then use an <img> tag in your about page like so:

// pages/about.js
import React from 'react';

const About = () => (
  <div>
    <h1>About us</h1>
    <p>This is the about page.</p>
    <img src="/logo.jpg" alt="Company logo" />
  </div>
);

export default About;

This would display the image at the '/logo.jpg' URL on your about page.