Next.js src Directory

The Next JS src directory, short for source directory is the primary location for your application’s source code. It is an alternate project format that typically contains all the components, pages, styles, and other assets needed for your application to function. In a Next.js project, the src directory is where you will spend most of your time coding.

What does the next js src directory contain

The src directory is where you’ll typically store your application’s source code files. It is the heart of your application and is where you’ll write most of your application’s logic. The directory is usually located at the root of your project, alongside other top-level directories such as pages, public, components, and styles.

• pages: It contains all of our Next.js pages, such as the homepage and about page.
• utils: It contains all of our configuration files, such as our database connection settings.
• components: It directory contains all of our reusable React components, such as a header and footer component.
• styles: It contains all of our CSS files, organized by page or component.

The src project directory structure looks like this.

src/
├── components/
│   ├── Header.jsx
│   ├── Footer.jsx
│   └── ...
├── pages/
│   ├── index.jsx
│   ├── about.jsx
│   └── ...
├── styles/
│   ├── globals.css
│   ├── home.module.css
│   └── ...
├── utils/
│   ├── api.js
│   ├── constants.js
│   └── ...
├── config/
    ├── db.js
    └── ...

You can choose to have the project with a src directory on initialization or follow these steps for the same.

Steps to create Next app with “src” directory

Step 1: Create a new Next.js project with the given command

npx create-next-app my-app

Step 2: Move to project and Create an src directory inside the root directory of your Next.js project called src.

cd my-app
mkdir src

Step 3: Move necessary files to the src directory, such as your pages, stylesheets, or any other files that your project may need.

mv pages/ src/
mv styles/ src/
mv public/ src/

Project Structure

The prohject structure will look like this

Step 4: Update the configuration: By default, Next.js looks for pages in the pages directory at the root of the project. We need to update the configuration to tell Next.js to look for pages in the src directory instead.

Now, create a new file called next.config.js in the root directory of your project i.e, in /src, and add the following code to it:

Javascript

// src/next.config.js

module.exports = {

    // Tell Next.js to look for pages
    // in the `src` directory
    pageExtensions: ["mdx", "jsx", "js", "ts", "tsx"],
    webpack: (config, { isServer }) => {
        // Move the styles to the `src` directory
        if (!isServer) {
            config.resolve.alias["@styles"] = path.resolve(
                __dirname,
                "src/styles"
            );
        }
        return config;
    },
};

This configuration tells Next.js to look for pages with extensions mdx, jsx, js, ts, and tsx in the src directory. It also moves the styles to the src directory.

Example: Add this basic code to the index.js and see the changes in output.

Javascript

// index.js

export default function Home() {
    return (
        <div
            style={{
                color: "green",
                textAlign: "center",
            }}
        >
            <h1>Welcome to GeeksforGeeks</h1>
        </div>
    );
}

Step to Run Next JS project: Use this command in the terminal.

npm run dev

Output: Open the browser and visit http://localhost:3000/ to see this output.