Deploy to Vercel

An app on your laptop is a prototype. An app at a URL you can send to a friend is a project. Deploying means building your app for production and running it on a server that anyone on the internet can reach.

Next.js runs anywhere you can run Node.js, so you have many choices. This lesson uses Vercel, the company that makes Next.js, because it needs no server setup and its free Hobby plan is enough for personal projects. The first two steps, building locally and pushing to GitHub, are the same for any host.

Build it locally firstCopy Anchor Link

The dev server is forgiving. A production build checks your types, runs the prerendering from the caching lesson, and fails loudly on errors. It is much nicer to see those errors on your laptop than in a deploy log.

npm run build

At the end, Next.js prints a table of your routes and how each one was rendered, for example which parts were prerendered and which are rendered on request. If the build fails, the message names the file and usually suggests a fix.

Then run the production build on your machine:

npm start

Open http://localhost:3000 and try the app again. This is the same code that will run on the server, minus the development warnings.

Put the code on GitHubCopy Anchor Link

create-next-app already made your project a Git repository with a first commit. You need a free GitHub account for the next steps.

git add .
git commit -m "Reading List on Next.js"

git remote add origin https://github.com/your-username/reading-list-next.git
git branch -M main
git push -u origin main

Deploy by importing from GitHubCopy Anchor Link

From now on, Git drives your deploys:

• Every push to main creates a new production deployment at your main URL.
• Every push to any other branch, and every pull request, creates a preview deployment with its own URL. You can try a change, or share it for feedback, before it reaches production.

Deploy from the terminal with the Vercel CLICopy Anchor Link

The Git flow is the one you will use most. Sometimes it is handy to deploy straight from your machine, for example before you have set up GitHub. The Vercel CLI does that.

npm install -g vercel
vercel login

vercel

vercel --prod

You can mix the two approaches. A project linked to GitHub still accepts CLI deploys.

Keep secrets in environment variablesCopy Anchor Link

The Reading List doesn't have any secrets yet. As soon as it talks to a real database or API, it will have a connection string or an API key. Those must never be written in your code or committed to Git.

Put them in environment variables instead:

• Locally, in a .env.local file in the project root. Next.js loads it automatically, and the default .gitignore keeps it out of Git.
• On Vercel, in your project's Settings, under Environment Variables. You can set different values for production and preview. If you use the CLI, vercel env pull downloads them into a local file for development.

DATABASE_URL=postgres://user:password@host/db

const url = process.env.DATABASE_URL; // only available on the server

Server code, such as Server Components and Server Functions, can read any variable. Only variables whose names start with NEXT_PUBLIC_ are copied into the browser's JavaScript, so never give a secret that prefix.

git switch -c personal-heading

<h1>Sam's Reading List</h1>

git add app/page.tsx
git commit -m "Personalise the heading"
git push -u origin personal-heading

git switch main
git merge personal-heading
git push