Create Next.js App In Web Folder: A Step-by-Step Guide

Aug 10, 2025 by Henrik Larsen 55 views

Create a Next.js Project in the Web Folder: A Comprehensive Guide

Hey guys! So, you're looking to dive into the awesome world of Next.js and want to keep your project structure nice and organized, right? You've come to the right place! In this guide, we're going to walk through creating a Next.js project specifically within a web folder. Why a web folder, you ask? Well, it's a fantastic way to keep your frontend code neatly separated from your backend or other parts of your application, making your project more maintainable and scalable. We'll cover everything from setting up your environment to running your first Next.js app, so let's jump in!

Why Use a Web Folder?

Before we get our hands dirty with code, let's quickly chat about why structuring your project with a web folder is a smart move. Imagine your project as a house. You wouldn't want the kitchen, living room, and bedroom all crammed into one space, would you? Similarly, in a large application, you want to keep different parts of your code logically separated.

Having a web folder is like having a dedicated wing for your frontend. It keeps all your Next.js-related files – components, pages, styles, and more – in one place. This makes it easier to navigate your codebase, especially when your project grows. It also allows for better collaboration in teams, as different developers can work on the frontend and backend without stepping on each other's toes. Plus, it's a common practice in many modern web development setups, so you'll be aligning yourself with industry best practices. Think of it as setting a solid foundation for a scalable and maintainable application. We aim to keep things organized and professional, making our lives easier in the long run. Trust me, future you will thank you for this!

Prerequisites

Okay, before we start coding, let's make sure we have all the necessary tools installed. Think of this as gathering your ingredients before you start cooking. First and foremost, you'll need Node.js and npm (Node Package Manager) or Yarn installed on your machine. Node.js is the runtime environment that allows you to run JavaScript outside of a web browser, and npm or Yarn are package managers that help you install and manage dependencies for your project. If you're not sure whether you have these installed, or if you need to update them, here’s a quick rundown:

Check Node.js version: Open your terminal or command prompt and type node -v. If you see a version number (e.g., v16.0.0), you have Node.js installed. If not, or if the version is quite old, head over to the official Node.js website (https://nodejs.org/) and download the latest LTS (Long Term Support) version. The LTS version is generally more stable and recommended for most users.
Check npm version: npm usually comes bundled with Node.js, so if you have Node.js, you likely have npm too. To check, type npm -v in your terminal. If you see a version number, you're good to go. If you need to update npm, you can run npm install -g npm@latest.
Alternatively, use Yarn: Yarn is another popular package manager that's often faster and more efficient than npm. If you prefer Yarn, you can install it globally by running npm install -g yarn. Once installed, you can check its version by typing yarn -v.

With Node.js and npm (or Yarn) set up, you're ready to roll! These tools are the bedrock of our Next.js development environment. They allow us to install packages, run scripts, and ultimately build our application. Having these in place ensures a smooth and efficient development process. So, let’s move on to the exciting part – creating our Next.js project!

Step-by-Step Guide to Creating a Next.js Project in a Web Folder

Alright, let’s dive into the fun part – creating our Next.js project! We'll break this down into easy-to-follow steps, ensuring you get everything set up correctly. We're going to use the create-next-app CLI tool, which is the official and recommended way to start a new Next.js project. It sets up all the necessary configurations and dependencies, so you can focus on building your application.

Step 1: Create the Main Project Folder

First things first, let's create the main folder for your project. This will act as the root directory for everything related to your application. Open your terminal and navigate to the directory where you want to create your project. For example, if you want to create it in your Documents folder, you would type:

cd Documents

Once you're in the desired directory, create a new folder for your project. Let's call it my-nextjs-app:

mkdir my-nextjs-app
cd my-nextjs-app

Now you have a shiny new folder ready for your project! This is where all your code will live, keeping everything nice and organized.

Step 2: Create the Web Folder

Now, let's create the web folder inside your project directory. This is where our Next.js application will reside. In your terminal, simply type:

mkdir web
cd web

Great! You've created the web folder, which will house all our frontend magic. This separation is key to a well-structured project, especially as it grows in complexity. By keeping our Next.js code in its own dedicated space, we make it easier to maintain and scale our application.

Step 3: Initialize the Next.js Project

This is where the magic happens! We'll use the create-next-app CLI tool to set up our Next.js project within the web folder. This tool will scaffold a basic Next.js application with all the necessary files and configurations. In your terminal, inside the web folder, run the following command:

yarn create next-app .
# or
npm create next-app .

Let's break this down:

yarn create next-app or npm create next-app: This is the command that invokes the create-next-app tool.
.: The dot signifies the current directory (web folder in our case) where we want to create the Next.js project.

When you run this command, create-next-app will prompt you for a few options, such as the project name and whether you want to use TypeScript or not. You can choose the default options by pressing Enter, or customize them to your liking. For simplicity, let’s stick with the defaults for now. create-next-app will then download and install all the necessary dependencies, which may take a few minutes depending on your internet connection.

Step 4: Run the Development Server

Once the installation is complete, you're ready to fire up your Next.js development server! This will allow you to see your application in action and start building your user interface. Inside the web folder, run the following command:

yarn dev
# or
npm run dev

This command starts the Next.js development server, which typically runs on http://localhost:3000. Open your web browser and navigate to this address. You should see the default Next.js welcome page, which confirms that your project is set up correctly!

Congratulations! You've successfully created a Next.js project within a web folder. You're now ready to start building amazing things with Next.js. This setup provides a clean and organized structure for your application, making it easier to manage and scale as your project grows.

Project Structure Explanation

Now that we have our Next.js project up and running, let’s take a moment to understand the project structure that create-next-app has set up for us within the web folder. This is crucial for navigating your project and knowing where to put your code. Think of it as understanding the blueprint of your house before you start decorating.

When you navigate into your web folder, you'll see a few key directories and files. Here's a breakdown of the most important ones:

node_modules: This directory contains all the npm packages (dependencies) that your project relies on. You typically don't need to touch this folder directly, as npm or Yarn manages its contents. It's like the foundation of your house – essential but mostly unseen.
package.json: This file is the heart of your Node.js project. It contains metadata about your project, such as its name, version, dependencies, and scripts. The scripts section is particularly important, as it defines commands like dev, build, and start that you use to run your application. Think of it as the title deed and instruction manual for your project.
package-lock.json or yarn.lock: These files ensure that everyone working on the project uses the exact same versions of dependencies. This helps prevent compatibility issues and ensures consistency across different environments. It's like having a detailed inventory of all the materials used in building your house, ensuring everything matches.
pages: This directory is where you'll create your application's pages. Next.js uses a file-system-based router, meaning that each file in the pages directory becomes a route in your application. For example, pages/index.js will be the homepage, and pages/about.js will be the /about page. This is the core of your application's structure, like the rooms in your house.
public: This directory is for static assets like images, fonts, and other files that you want to serve directly. These files are served at the root of your application. Think of it as your garden or driveway – publicly accessible parts of your property.
styles: This directory typically contains your global CSS files and any other styling-related assets. It's where you define the look and feel of your application, like the paint and décor of your house.

Understanding this structure is key to efficiently developing with Next.js. It allows you to quickly locate and modify files, add new pages, and manage your project's dependencies. As you build your application, you'll become more familiar with these directories and files, making your development workflow smoother and more productive.

Customizing Your Project

Now that you have a basic Next.js project set up in a web folder, let's explore some ways to customize it and make it your own. Next.js is incredibly flexible and provides various options for configuration and extension. Think of this as adding your personal touch to your new home, making it truly yours.

Adding Custom Scripts

The package.json file is where you can define custom scripts to automate common tasks. The default create-next-app setup includes scripts for development (dev), building (build), starting (start), and linting (lint). You can add your own scripts to streamline your workflow. For example, you might want to add a script to run tests or deploy your application.

To add a custom script, open your package.json file and locate the scripts section. This is a JSON object where you can add key-value pairs. The key is the name of the script, and the value is the command to execute. Here’s an example of adding a script to run tests:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "test": "jest"
}

In this example, we've added a test script that runs the jest command. To run this script, you would simply type yarn test or npm run test in your terminal. Custom scripts can save you time and effort by automating repetitive tasks.

Configuring Next.js

Next.js provides a next.config.js file in the root of your project (in our case, inside the web folder) where you can configure various aspects of your application. This file allows you to customize things like environment variables, webpack configuration, and more. It's like the control panel for your Next.js application.

For example, you can set environment variables that are accessible in your application code. This is useful for storing sensitive information or configuration values that vary between environments (e.g., development, production). To define environment variables, you can add a env section to your next.config.js file:

module.exports = {
  env: {
    API_URL: 'http://localhost:3001/api',
  },
};

In this example, we've defined an environment variable called API_URL. You can access this variable in your application code using process.env.API_URL. The next.config.js file is a powerful tool for customizing your Next.js application to fit your specific needs.

Adding Custom Components

Components are the building blocks of Next.js applications. They are reusable pieces of UI that you can compose to create complex user interfaces. Next.js encourages a component-based architecture, which makes your code more modular, maintainable, and testable. Think of components as the furniture and fixtures in your house – each has a specific function and contributes to the overall design.

To create a custom component, you simply create a new JavaScript file (or TypeScript file if you're using TypeScript) in your components directory (you may need to create this directory if it doesn't exist). A component is typically a JavaScript function that returns JSX, which is a syntax extension to JavaScript that allows you to write HTML-like code.

Here’s an example of a simple custom component:

// components/MyComponent.js

function MyComponent() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>This is my custom component.</p>
    </div>
  );
}

export default MyComponent;

To use this component in your pages, you can import it and render it like any other JSX element:

// pages/index.js

import MyComponent from '../components/MyComponent';

function HomePage() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

export default HomePage;

Custom components are the key to building complex and interactive user interfaces in Next.js. By breaking your UI into smaller, reusable components, you can create a more organized and maintainable codebase.

Conclusion

Alright, awesome work, guys! You've made it through the journey of creating a Next.js project within a web folder. You've learned why this structure is beneficial, how to set up your environment, initialize your project, understand the project structure, and even customize it to your liking. That's a lot to take in, but you've nailed it!

Setting up your project in this way is a fantastic first step towards building scalable and maintainable web applications. By keeping your frontend code neatly separated in a web folder, you're setting yourself up for success as your project grows. You've also gained a solid understanding of the core concepts of Next.js, including the file-system-based router, components, and configuration options.

Now, it's time to put your knowledge into practice and start building something amazing! Experiment with different components, explore the Next.js documentation, and don't be afraid to try new things. The world of Next.js is vast and exciting, and there's so much to discover.

Remember, the key to mastering any new technology is practice and persistence. Keep building, keep learning, and keep pushing your boundaries. You've got the foundation, now it's time to build your dream application. Happy coding!