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:

  1. Install Git
  2. Install nvm
  3. Install Node.js
  4. Create a Next.js app

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.

Command line developer tools installation alert

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
> [email protected] 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. 🚀

Next.js app running in a web browser