Deploy Nextjs to Vercel Reference

[egoullaud]

Objective This document will walk you through the steps to deploy your Next App to Vercel, including a video of the process and resource links.

Steps to Follow

1. Create your next app with create-next-app locally.
2. Push your code to a GitHub repository. (You may have to clone a public repo like Chingu to your own repo.)
3. Create an account on Vercel and link to your Github
4. From your dashboard, click "Add New..." and select "Project" from the drop-down.
5. Select which repository to import
6. Vercel will then issue a build command and bam! Your project is live!

Resources and Links

• How to Create and Set up a Next App: https://nextjs.org/learn/basics/create-nextjs-app
• How to Deploy a Next App to Vercel: https://nextjs.org/learn/basics/deploying-nextjs-app
• You can only access your own repositories with the free version, so for the purposes of this project I forked our team repo and deployed it from my account. I can update the deployments as our project develops.

See the video below for a walkthrough no audio

https://user-images.githubusercontent.com/108373927/236052732-3e6bfff1-337d-4edc-898f-ff8a10352449.mp4

Creating NextJS Projects

npx create-next-app@latest

What is your project name? > boolean-bot-game
TypeScript  > No
ESLint  > No
Tailwind CSS > yes
src > No
experimental > no
import alias > @

...installing dependencies

cd boolean-bots-game

Running NextJS Projects - enables live reloading

npm run dev

Components folder will have to be added at the same level as the Pages folder (not within)

Helpful Additions:

1. Tailwind CSS IntelliSense VSCode extension
2. react-icons
3. parasite Chrome extension