How to launch a Next.js website template, step by step
By Core Concepts · · Setup
If you have never run a Next.js project, the first launch looks harder than it is. It comes down to five steps and a handful of commands. This guide uses our templates as the example, but the steps are the same for most static Next.js sites.
What you need
- Node.js installed on your computer. The LTS version from nodejs.org is the one to pick.
- A code editor. Visual Studio Code is free and works well.
- The template zip, unpacked into a folder.
1. Install
Open a terminal in the template folder and run:
- npm install
- npm run dev
The first command downloads what the project depends on. The second starts a local preview, normally at http://localhost:3000. Leave it running while you work and the page updates as you save.
2. Replace the content
In our templates all the copy and data live in one file, lib/content.ts. Open it and replace the demo text with your own: the business name, navigation, headlines, services, prices, contact details. Save, and the preview updates.
For colours and fonts, see how to customise a website template.
3. Replace the photos
Put your own images in the assets-src folder using the names the template expects, then run npm run images. That creates the smaller, modern image formats the site serves, so pages stay fast without you resizing anything by hand.
4. Build
Run npm run build. For a static template this produces a folder called out. That folder is your finished website: plain HTML, CSS, JavaScript and images.
5. Publish
You have three easy options.
- Any web host. Upload the contents of the out folder to your hosting with FTP or the host's file manager. This works on ordinary shared hosting.
- Vercel or Netlify. Create an account, connect the project or drag the out folder in, and you get a live address in about a minute. Both have free tiers; check their terms for commercial sites. Then add your own domain in the dashboard.
- Cloudflare Pages. The same idea, also with a free tier.
A template that is not a static export needs a host that runs Node, such as Vercel. Each of our product pages says how that template deploys.
Common snags
- "npm is not recognised". Node.js is not installed, or the terminal was opened before installing it. Close it and open a new one.
- Images not updating. Run npm run images again after changing files in assets-src.
- The page looks right locally but broken online. Make sure you uploaded the contents of the out folder, not the folder itself, to the root of the site.
After launch
Add your domain, check the site on a phone, and submit the address to Google Search Console so it gets indexed. Then make a note of the two commands you will use again: npm run dev to preview changes and npm run build to publish them.
If you get stuck with one of ours, email us. Setup help is included.