No history yet

Project Setup

Setting Up Your Workshop

Before you can build a house, you need to set up your workshop and gather your tools. In web development, it's the same. Our main tool for building Next.js apps is Node.js.

Node.js is a JavaScript runtime environment. That's a fancy way of saying it lets you run JavaScript code outside of a web browser. When you install Node.js, you also get something called npm, which stands for Node Package Manager. Think of npm as a massive library of pre-written code packages that you can easily pull into your projects.

To get started, head to the official Node.js website and download the LTS (Long-Term Support) version. The installer will guide you through the process. Once it's done, you can verify that everything is working by opening your terminal or command prompt and running these two commands:

# Check Node.js version
node -v

# Check npm version
npm -v

If you see version numbers printed for both, your workshop is ready.

Creating Your First App

With the tools in place, it's time to lay the foundation for our app. Next.js provides a simple command-line tool that scaffolds a new project for you, setting up all the necessary files and configurations. It's called create-next-app.

In your terminal, navigate to the directory where you want to store your projects and run the following command:

# npx lets you run packages without installing them globally
npx create-next-app@latest my-next-app

This command will kick off an interactive setup process. It will ask you a few questions, such as whether you'd like to use TypeScript, ESLint, or Tailwind CSS. For your first project, it's safe to just accept the default answers by hitting Enter for each prompt.

Once the process is complete, you'll have a new folder named my-next-app. Navigate into it and start the development server:

# Change directory into your new project
cd my-next-app

# Start the development server
npm run dev

The npm run dev command starts a local server, usually at http://localhost:3000. Open this address in your web browser, and you'll see the default Next.js welcome page. This means your application is up and running.

Lesson image

Exploring the Project Structure

The setup command created several files and folders. Let's briefly look at the most important ones.

Here's a quick breakdown:

  • app/: This is where the magic happens. The pages of your application are defined here. For example, the code for your homepage lives in app/page.tsx.
  • public/: This folder is for static assets that don't need to be processed, like images, fonts, or icons. You can reference them directly in your code.
  • node_modules/: This directory contains all the external code packages that your project depends on. You should never edit anything in here directly.
  • package.json: This is your project's manifest file. It lists your project's dependencies and defines helpful scripts, like npm run dev.

That's it. You've successfully set up a local development environment and created a brand new Next.js project. You're now ready to start building.