Create a Next.js app with Azure Static Web Apps.

Update: 4/20/23: I moved this blog out of Next.js since having problems ranking in Google due to the way Next.js loads the content with JS.

Sources

Create GitHub repo

Created a repo called azureblog for all my Azure related tutorials and lessons learned.

  • Don’t add a README

Install Node in Ubuntu

Using the default sudo apt install nodejs npm doesn’t work with Next.js, since it requires v.14 and above, and apt version is v.12.

Tried using Nodesource but running the commands returned an error that I couldn’t figure out. (Wasted about 2 hrs here)

Install with NVM (took 5 minutes)

cd ~/
git clone https://github.com/nvm-sh/nvm.git .nvm
cd ~/.nvm
git checkout v0.39.3
. ./nvm.sh

Add to ~/.bashrc

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

List all available versions:

nvm ls-remote

Install the latest LTS (v18.14.1 as of Feb 2023):

nvm install --lts

Verify that it was installed:

$ node -v
v18.14.1
$ npm -v
9.3.1

Create a Next.js app

Use this command with the name of the github repo.

npx create-next-app@latest azureblog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

Output:

Creating a new Next.js app in /home/tom/azureblog.
Downloading files from repo https://github.com/vercel/next-learn/tree/master/basics/learn-starter. This might take a moment.
Installing packages. This might take a couple of minutes.
added 18 packages, and audited 19 packages in 10s
found 0 vulnerabilities
Initialized a git repository.
Success! Created azureblog at /home/tom/azureblog
Inside that directory, you can run several commands:

npm run dev
    Starts the development server.
np