Installing Next.js and Going Live

01What Is Next.js and Who Should Use It?

Next.js is a web application framework built on React. While React only renders interface components, Next.js brings routing, server-side page rendering, static page output, image optimization and API endpoints out of the box.

Its biggest difference is that it can generate pages as HTML on the server. Search engines and social media previews see the content directly, and the first load gets faster. That makes it a better fit than single-page applications for content-heavy business sites, catalog pages and blogs.

If you are only building an admin panel that requires login, a simpler setup may be enough; for that scenario, see our React setup with Vite guide.

02Prerequisites

Next.js is picky about the Node.js versions it supports and drops older Node support in new major releases. So installing the current LTS version from nodejs.org is the smoothest path.

• The current Node.js LTS version and npm (which comes with Node); pnpm, yarn or bun can also be used.
• A code editor; for a setup with recommended extensions, see the VS Code installation article.
• Git and a remote repository (GitHub, GitLab): deployment processes are usually fed from the repository.
• If you will deploy to your own server, a Linux server with SSH access.

03Install and Verify Node.js

Installing Node.js differs slightly by operating system; the Next.js commands are the same everywhere after installation.

Windows

Download the LTS installer from nodejs.org or use winget; then reopen the terminal.

winget install OpenJS.NodeJS.LTS
node -v

macOS

You can install it with the official package or Homebrew.

brew install node
node -v

Linux

The version in distribution repositories can be outdated; installing with nvm is safer.

nvm install --lts
nvm use --lts
node -v

04Creating a Project with create-next-app

The create next app wizard is the official starter tool and installs all required packages in one go. When you run the command, it asks for a project name and a few options; if you are unsure, accepting the recommended defaults is a good start.

npx create-next-app@latest benim-sitem
cd benim-sitem
npm run dev

05Understanding the App Router Structure

The Next.js App Router generates routing from the folder structure. Each folder under the app folder is a URL segment; the page.tsx file in that folder defines the page, and layout.tsx defines the shared skeleton of that section.

In the App Router, components are server components by default: they run on the server, can fetch data directly and send no JavaScript to the browser. For components that need interaction, such as clicks or form state, you add the use client directive at the very top to make them client components.

Metadata for SEO

Each page or layout file can export a metadata object to define the title, description and Open Graph tags. For dynamic pages, the generateMetadata function is used. This structure makes it easier to manage, at page level, the tags needed for SEO-friendly web design.

06Building and Environment Variables

Before going live, create a production build with npm run build. The build output lists whether each page is generated statically or dynamically; a page that unexpectedly comes out dynamic is an early sign of unnecessary server load.

Environment variables are kept in the .env.local file. Only variables with the NEXT_PUBLIC_ prefix are sent to the browser; database passwords and API secret keys must stay unprefixed and be used only in server code.

npm run build
npm run start

07How Should Each Page Be Rendered?

The strength of Next.js comes from being able to choose a different rendering strategy for each page. A wrong choice means either unnecessary server cost or stale content, so classify your pages by type right after setup.

Pages that rarely change, such as about, services and contact, are ideal for static generation: they are generated once at build time and served from the CDN in under a second. Almost all the pages of a corporate website belong to this group.

For pages updated occasionally, such as blog and product listings, regenerating at set intervals (revalidate) is a good balance. User-specific dashboards, carts, or reservation screens showing live availability must be generated on the server on every request. This last group is a common scenario in industry software such as hotel and agency systems, and it requires thinking through database, cache and authorization design together.

08Next.js Deployment Options

There are three common routes for Next.js deployment. Which you choose depends on traffic, budget, data location and your team's experience managing servers.

• Vercel: The platform of the company that develops Next.js. You connect the repository, and every push produces an automatic build and a preview URL.
• Your own Node.js server: A process manager such as PM2 keeps the app running with npm run start, with Nginx placed in front. It gives full control, but maintenance is your responsibility.
• Static export: With the output: 'export' setting in the next.config file, the site is turned into plain HTML files. Dynamic features that require server components do not work in this mode.

Going Live with PM2 and Nginx

On an Ubuntu-based server, after installing Node.js, pull the project from the repository, build it and start it with PM2. PM2's startup command asks you to run the line it prints on screen with sudo; that line makes the app start automatically when the server reboots.

git clone https://github.com/kullanici/benim-sitem.git
cd benim-sitem
npm ci
npm run build
sudo npm install -g pm2
pm2 start npm --name benim-sitem -- start
pm2 save
pm2 startup

server {
    listen 80;
    server_name ornek.com www.ornek.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

09Common Errors and Fixes

Most errors in Next.js projects come from version incompatibility or from mixing server and client code. For package management issues, our npm commands guide can also help.