Website Setup Basics

Basic steps to get a modern React website up and running using Next.js, deployed on Vercel, and version controlled with GitHub.

Create a new repository on GitHub:

1. Go to github.com and sign in
2. Click "New repository"
3. Name your repository
4. Choose public or private
5. Initialize with README if starting from scratch

Set up a new Next.js project with TypeScript and Tailwind CSS:

npx create-next-app@latest my-website
# Follow the prompts:
# ✔ Would you like to use TypeScript? Yes
# ✔ Would you like to use ESLint? Yes
# ✔ Would you like to use Tailwind CSS? Yes
# ✔ Would you like to use src/ directory? Yes
# ✔ Would you like to use App Router? Yes
# ✔ Would you like to customize the default import alias? No

The key configurations chosen:

• TypeScript for type safety
• ESLint for code quality
• Tailwind CSS for styling
• src/ directory for better organization
• App Router for new Next.js features

Initialize Git and push to GitHub:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/username/repository.git
git push -u origin main

Deploy your site on Vercel:

1. Go to vercel.com and sign in with GitHub
2. Click "New Project"
3. Import your repository
4. Keep default settings for Next.js
5. Click "Deploy"

Vercel will automatically detect Next.js and set up the build configuration. It also provides:

• Automatic deployments on git push
• Preview deployments for pull requests
• Custom domain support
• SSL certificates
• Edge functions and serverless functions

Basic commands for development:

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Lint code
npm run lint

Set up environment variables for different environments:

• Create .env.local for local development
• Add environment variables in Vercel project settings
• Use different variables for Preview and Production

# .env.local example
NEXT_PUBLIC_API_URL=http://localhost:3000
DATABASE_URL=postgresql://localhost:5432/mydb

• Next.js Documentation
• Tailwind CSS Documentation
• Vercel Documentation
• GitHub Documentation