Project Configuration

next.config, Tailwind, shadcn init, environment variables, folder structure

Week 12–3 daysEstimated: 8h total

Why this phase matters

Configuration mistakes cascade into every subsequent phase. A wrong content path in Tailwind means no styles. A missing env variable means API calls silently fail. Get this right once and never think about it again.

Configuration Files

Create next.config.js — add S3 image domains, API proxy rewrites

30 min

Copy tailwind.config.js — identical, just update content paths from ./src/** to ./**

5 min

Create .env.local — rename all VITE_ vars to NEXT_PUBLIC_

10 min

Install all shadcn components — using the batch command below

10 min

Folder Structure — Copy These Exactly

Copy src/components/ — → components/ — works as-is

2 min

Copy src/store/ — → store/ — add 'use client' as line 1

10 min

Copy src/utils/ — → utils/ — unchanged

2 min

Copy src/assets/ — → public/assets/

2 min

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: '*.amazonaws.com' },
    ],
  },
  async rewrites() {
    return [
      { source: '/api/:path*', destination: `${process.env.NEXT_PUBLIC_API_URL}/api/:path*` },
    ]
  },
}
module.exports = nextConfig

terminal — batch install shadcn components

# Install all 21 components at once
npx shadcn@latest add \
  button input label card dialog sheet \
  table select textarea checkbox \
  avatar badge separator skeleton \
  toast popover command dropdown-menu \
  form tabs tooltip

.env.local — template

# API
NEXT_PUBLIC_API_URL=http://localhost:5000

# Auth
NEXT_PUBLIC_JWT_SECRET=your-jwt-secret

# AWS S3
NEXT_PUBLIC_S3_BUCKET=your-bucket-name
NEXT_PUBLIC_S3_REGION=ap-south-1

# Socket.io
NEXT_PUBLIC_SOCKET_URL=http://localhost:5000

# App
NEXT_PUBLIC_APP_NAME=Medicare
NEXT_PUBLIC_APP_URL=http://localhost:3000

tailwind.config.js — content paths

// BEFORE (Vite — src directory)
content: ['./src/**/*.{js,jsx}']

// AFTER (Next.js — root directory)
content: [
  './app/**/*.{js,jsx}',
  './components/**/*.{js,jsx}',
  './lib/**/*.{js,jsx}',
]

Phase 00 — Preparation & Audit

Phase 02 — Public Pages — SEO Critical