How to Set Up a Next.js Project from Scratch

Next.js is a powerful React framework that makes it easy to build server-side rendered (SSR) and statically generated websites. Whether you’re building a blog, an e-commerce site, or a portfolio, Next.js has you covered. In this tutorial, we’ll walk through how to set up a Next.js project from scratch.

---

Step 1: Install Node.js

Before we start, make sure you have Node.js installed on your computer. If you don’t, head over to the official Node.js website and download the latest version. Once installed, you can check if it’s working by running the following command in your terminal:

node -v

This should display the version of Node.js you’ve installed.

---

Step 2: Create a New Next.js Project

Now that Node.js is installed, let’s create a new Next.js project. Open your terminal and run the following command:

npx create-next-app my-next-app

Here, my-next-app is the name of your project. You can replace it with whatever you’d like. This command will set up a new Next.js project with all the necessary files and dependencies.

You will be shown options to choose between Typescript or Javascript but for this tutorial we will be using Javascript

---

Step 3: Explore the Project Structure

Once the project is created, navigate into the project folder:

cd my-next-app

Let’s take a quick look at the folder structure:

• pages/: This is where your application’s pages live. Each file in this folder corresponds to a route in your app.
• public/: This folder is for static assets like images, fonts, and icons.
• styles/: This folder contains your CSS files.
• package.json: This file lists your project’s dependencies and scripts.

---

Step 4: Run the Development Server

To see your app in action, start the development server by running:

npm run dev

Once the server is running, open your browser and go to http://localhost:3000. You should see the default Next.js welcome page.

---

Step 5: Modify the Home Page

Let’s customize the home page. Open the pages/index.js file and replace the default code with the following:

export default function Home() {
  return (
    <div>
      <h1>Welcome to My Next.js App!</h1>
      <p>This is my first Next.js project.</p>
    </div>
  );
}

Save the file, and you’ll see the changes reflected in your browser.

---

Step 6: Add Styling

Next.js supports CSS modules out of the box. Let’s add some basic styling to our home page.

1. Go to the styles folder and open the Home.module.css file.
2. Add the following styles:

.container {
  text-align: center;
  margin-top: 50px;
}

.heading {
  color: #0070f3;
}

1. Now, import and apply the styles in pages/index.js:

import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <h1 className={styles.heading}>Welcome to My Next.js App!</h1>
      <p>This is my first Next.js project.</p>
    </div>
  );
}

Save the file, and your app should now have a centered heading with a blue color.

---

Step 7: Add a New Page

One of the best features of Next.js is its file-based routing. Let’s create a new page.

1. In the pages folder, create a new file called about.js.
2. Add the following code:

export default function About() {
  return (
    <div>
      <h1>About Me</h1>
      <p>This is the about page of my Next.js app.</p>
    </div>
  );
}

1. Save the file and navigate to http://localhost:3000/about in your browser. You should see your new page!

---

Conclusion

Congratulations! You’ve just set up a Next.js project from scratch, customized the home page, added styling, and created a new page. This is just the beginning— Next.js has many more features like API routes, dynamic routing, and static site generation that you can explore.

If you found this tutorial helpful, feel free to share it with others. And don’t forget to follow me on Twitter for more web development tips and tutorials.

Happy coding! 🚀

---

Connect with Me

• Portfolio: devvick.online
• GitHub: github.com/lucky-victory
• Twitter: @CodewithVick

---

Code Repository

You can find the complete code for this project on my GitHub:

github.com/lucky-victory/nextjs-starter