design + art portfolio website using next.js, typescript, eslint, scss, and hosting with vercel
before installing next.js, make sure you have your dev environment set up correctly. there are a few system requirements, such as node.js v16.4 or later
before installing node.js, you'll need to make sure you have xcode command line tools (an integrated dev environment (IDE) comprised of software dev tools) and homebrew installed on your macOS.
check if xcode is already installed using xcode-select --version
and if it isn't, execute this command to install:
$ xcode-select --install
check if homebrew is installed using brew --version
if it isn't, execute this command:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
you'll then be given a few prompts to proceed, enter your password, and enter y
to confirm installation. verify that homebrew is set up correctly, brew doctor
should output your system is ready to brew
if no updates are required.
once homebrew is set up, install node.js (which includes npm
packages) with brew install nodejs
to check which version of node.js and npm you have: use node -v
and npm -v
to update your version of node.js, first update homebrew brew update
and then upgrade node.js itself brew upgrade nodejs
to start a new next.js project with everything set up automatically, run:
npx create-next-app@latest
run the following command to install sass and use scss in your app:
npm install sass
run the local development server http://localhost:3000
npm run dev
you can start editing the page by modifying app/page.tsx
and the page will auto-update as you edit the file
we'll use vercel to deploy our project and host our website.