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.
- Next.js doc to create an app
- Next.js doc to deploy app to Github
- Next.js app example
- Deploy Next.js App to Azure
- Custom Domain in Azure Static Web Apps
- What is Azure Static Web Apps
- Install Node with NVM
Create GitHub repo
Created a repo called
azureblog for all my Azure related tutorials and lessons learned.
- Don’t add a
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
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
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:
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"
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