I will walk you through creating and deploying a NextJs site to Vercel as well as registering a domain name and pointing to the site.
This article is a part of series: Building Anaecha.com.
Create Github Repositories
- Go to github.com and sign in
- Click on "New" button to create a new repository
- Enter a repository name
- Select "Public" or "Private"
- Click on "Create repository" button
Create Next.Js App
- Run this command (Replace your-app-name with yours)
This will create a directory named "your-app-name".
npx create-next-app your-app-name
If you already have a directory, Go to your directory and run this command instead.
npx create-next-app .
- Now, you can test your site with this command.
npm run dev
- Visit your site at http://localhost:3000
First push to the github repository
Run these commands (Replace your-github-url with yours)
git init git add . git commit -m "first commit" git remote add origin your-github-url git push -u origin main
To confirm the remote, you can run this command.
git remote -v
If you use SSH key, Make sure you already register it.
Deploy on Vercel
- Go to Vercel site and sign in
- Click on "New Project" button
- Click on "Import" from the repository
- Click on "Skip" to build a team
- Click on "Deploy"
- Once the process is finished, Click on "Visit" to test the site.
Register a Domain name
Register a domain name for the site, you can choose any provider based on your preference. In my case, I choose Google Domains.
Add a Domain name
- Go to your site dashboard on Vercel
- Click on "Settings" tab
- Click on "Domains" on left navigation
- Enter your registered domain name and Click "Add"
- Select your domain base and Click "Add". For my case, I use "anaecha.com" and redirect "www.anaecha.com" to it.
Ref: Vercel Custom Domain
Link Google Domain to Vercel
- Go to your Google Domains's dashboard
- Click on your registered domain name
- Click on "DNS" on left navigation
- Copy "Value" from Vercel and Create records as followed
- Click on "Save", this process might take some time.
Complete Vercel Domain Configuration
- Go to "Domains" settings for your Vercel App
- Under your-domain.vercel.app, Click on "Edit"
- Under "Redirect to", Select your-domain.com
- Click on "Refresh" buttons on your-domain.com and www.your-domain.com
- If the process is completed, "Valid Configuration" will be shown.
- Try to visit your-domain.com and www.your-domain.com
That is all. In the next part, I will introduce Netlify CMS to our blog.