The src directory is short for “source” and is the primary location for your application’s source code. It 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 ‘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
└── ...
Steps to create “src” directory:
Step 1: Create a new Next.js project:
npx create-next-app my-app
Step 2: 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: Move all the necessary files, 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:
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 1: Add the following code to see the output.
- index.js
Javascript
// index.js export default function Home() { return ( <div style={{ color: 'green', textAlign: 'center' }}> <h1>Welcome to neveropen</h1> </div> ) } |
Step 6: Run the next project:
npm run dev
Output:
Reference: https://nextjs.org/docs/advanced-features/src-directory
