Put the site online

The two settings

Both are optional. Without Docker they go in .env.local, or in your host's environment variables.

Both are NEXT_PUBLIC_ values: the build writes them into the JavaScript the browser loads. Set them before you build, and build again after you change one. Never put a secret in them: every visitor can read them.

• Connect the contact form

Vercel

1. 01

   Put the code in a Git repository

   The download has no Git history. Start one in the folder, create an empty repository on GitHub, GitLab or Bitbucket, and push to it as its page shows.

   Terminalin landing-page-template-1Copy

   git init
   git add .
   git commit -m "First version"
2. 02

   Import it in Vercel

   In Vercel, choose Add New, then Project, and import the repository. Vercel detects Next.js; keep its build settings.
3. 03

   Add the settings

   Under Environment Variables, add NEXT_PUBLIC_SITE_URL with your address, and NEXT_PUBLIC_API_BASE_URL if you have a contact form API. Add ENABLE_EXPERIMENTAL_COREPACK with the value 1 too, so Vercel installs with the Yarn 4 version the project pins.
4. 04

   Deploy

   Press Deploy. After you change a variable later, deploy again so the new value is built in.

   Expected result: Vercel opens your site on its vercel.app address. Add your own domain under Settings, then Domains, and set NEXT_PUBLIC_SITE_URL to it.

   Having trouble?

Any Node.js host

On a server or a host with Node.js 22 or newer: set the two values in .env.local or in the host's environment, then install, build and start.

corepack enable
yarn install
yarn build
yarn start

• yarn start listens on port 3030, whatever PORT says. On a host that gives your app its port in PORT, such as Railway or Render, set the start command to yarn start -p $PORT.
• Keep the process running with your host's process manager, and put a web server such as Nginx or Caddy in front of it for HTTPS on your domain.

The Docker image

The image you ran locally also serves the site in production. Pass your settings to the build, leaving out the API if you have none:

docker build -t agency-portfolio --build-arg NEXT_PUBLIC_SITE_URL=https://www.your-domain.com --build-arg NEXT_PUBLIC_API_BASE_URL=https://api.your-domain.com .

Then run it on the server. -d keeps it in the background, and --restart unless-stopped starts it again after a reboot:

docker run -d --restart unless-stopped -p 3030:3030 agency-portfolio

• docker run -e NEXT_PUBLIC_SITE_URL=… changes nothing: the value was written in at build time. Build the image again with the new --build-arg.
• Inside the container the site listens on 3030. Point your web server at the port on the left of -p.

Before you go live

• Set NEXT_PUBLIC_SITE_URL to your address.
• Replace the sample content: the projects, testimonials, prices, email, phone and address are examples.
• Give the buttons and the social and legal links real destinations: they ship without one, or as #.
• Connect the contact form to your API, or remove it: without one, messages go nowhere.
• Change the author in generator in src/app/[locale]/layout.tsx, the names in public/site.webmanifest, and the preview image public/image.png.

• Make it yours