Next.js src Directory
Last Updated :
02 Nov, 2023
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
module.exports = {
pageExtensions: [ "mdx" , "jsx" , "js" , "ts" , "tsx" ],
webpack: (config, { isServer }) => {
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
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.
Share your thoughts in the comments
Please Login to comment...