How to Start a Next.js Project from Scratch

Last updated on 

Next.js is a powerful React framework that allows developers to build fast and scalable applications with built-in server-side rendering, static site generation, and API routes. In this guide, we will walk through the steps to set up a Next.js project from scratch.

1. Install Node.js

Before starting, make sure you have Node.js installed on your system. You can download and install the latest stable version from the official website:

Download Node.js

After installation, verify the installation by running the following command in your terminal:

node -v

You should see the installed Node.js version displayed.

2. Create a Next.js Application

To create a new Next.js project, use the following command:

npx create-next-app@latest my-next-app
cd my-next-app

This command will prompt you to enter a project name and select some configuration options such as TypeScript, Tailwind CSS, ESLint, and more. Choose the options that best fit your needs.

3. Install Dependencies

Once the project is created, navigate into the project folder and install additional dependencies (if needed):

npm install

This ensures that all required packages are installed properly.

4. Run the Development Server

Now, you can start the Next.js development server by running:

npm run dev

By default, the application will be accessible at:

http://localhost:3000/

You should see the default Next.js welcome page.

5. Project Structure Overview

After running create-next-app, the project folder will have the following structure:

my-next-app/
├── node_modules/
├── public/
├── pages/
│   ├── _app.js
│   ├── index.js
├── styles/
├── package.json
├── next.config.js
├── .gitignore
└── README.md
  • pages/: Contains the application's pages.
  • public/: Stores static assets like images.
  • styles/: Stores global stylesheets.
  • package.json: Lists dependencies and scripts.
  • next.config.js: Configuration file for Next.js.

6. Create Your First Page

Edit the pages/index.js file to modify the home page:

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

Now, refresh http://localhost:3000/ to see the updated content.

7. Build and Deploy

When you're ready to deploy your Next.js application, generate an optimized production build using:

npm run build

Then, start the application in production mode:

npm start

For easy deployment, consider using Vercel, which is the recommended hosting platform for Next.js:

npm install -g vercel
vercel

Conclusion

You have successfully created a Next.js application from scratch! Next.js provides powerful features like static site generation, server-side rendering, and API routes, making it an excellent choice for modern web development.

Now, explore more features and start building amazing applications!