Running Next.js on a M1 Mac
Here’s a step-by-step guide to creating and running a Next.js app on a new Apple silicon Mac with a fresh installation of MacOS (Big Sur 11.2). There’s four parts to it:
Install Git
Open Terminal and enter the command to install Apple’s Command Line Tools, which include Git.
mike@MacBook-Pro ~ % xcode-select --install xcode-select: note: install requested for command line developer tools
Click the Install button on the alert that appears.
Confirm Git was installed and its version.
mike@MacBook-Pro ~ % git --version git version 2.24.3 (Apple Git-128)
Install nvm
Create a run commands file for zsh.
mike@MacBook-Pro ~ % touch ~/.zshrc
Enter the command to run nvm’s install script. Check nvm’s README for the latest version number.
mike@MacBook-Pro ~ % curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
Quit then reopen Terminal, which will start nvm using the run commands file we just created.
Confirm nvm was installed and its version.
mike@MacBook-Pro ~ % nvm --version 0.37.2
Install Node.js
We’ll install Node.js using nvm. For compatibility with Apple silicon, we must install Node.js v15 or newer.
mike@MacBook-Pro ~ % nvm install v15
Confirm Node.js was installed and its version.
mike@MacBook-Pro ~ % node --version v15.8.0
Create a Next.js app
Create a directory for our Next.js project and change to that directory.
mike@MacBook-Pro ~ % mkdir -p ~/code/my-project mike@MacBook-Pro ~ % cd ~/code/my-project
Use create-next-app, which creates a Next.js app based on the template
we’ve specified through the --example flag.
mike@MacBook-Pro my-project % npx create-next-app . --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter" Need to install the following packages: create-next-app Ok to proceed? (y) y Creating a new Next.js app in /Users/mike/code/my-project. … Success! Created my-project at /Users/mike/code/my-project
Enter the command to start our local development server.
mike@MacBook-Pro my-project % npm run dev > learn-starter@0.1.0 dev > next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Open http://localhost:3000/ in a browser to view our app. 🚀
