🌍 Environment Setup in Next.js

Setting up a Next.js development environment involves installing dependencies, configuring environment variables, and optimizing settings for development and production.

📌 1. Install Next.js

To start a new Next.js project, use:

bash
npx create-next-app my-next-app

or using Yarn:

bash
yarn create next-app my-next-app

Then, navigate to your project:

bash
cd my-next-appnpm run dev

✅ Runs the app on http://localhost:3000

📌 2. Project Structure

After installation, your project looks like this:

ruby
my-next-app/│-- pages/             # Page components (Auto-Routing)│-- public/            # Static assets (images, favicons)│-- styles/            # Global & component styles│-- components/        # Reusable UI components│-- next.config.js     # Next.js configuration│-- .env.local         # Environment variables│-- package.json       # Project dependencies

✅ Pages inside pages/ are automatically turned into routes.

📌 3. Running Next.js Locally

To start the development server:

bash
npm run dev

✅ Hot reloads on code changes
✅ Runs on http://localhost:3000

For production build, use:

bash
npm run build && npm start

✅ Optimizes for production

📌 4. Environment Variables

Use .env.local for environment-specific settings.

🔹 Example: .env.local

ini
NEXT_PUBLIC_API_URL=https://api.example.comSECRET_KEY=123456

🔹 Using Variables in Code

javascript
const apiUrl = process.env.NEXT_PUBLIC_API_URL;console.log(apiUrl);

✅ Prefix with NEXT_PUBLIC_ for client-side usage
✅ No need to restart server after changes

📌 5. Setting Up TypeScript (Optional)

To add TypeScript, run:

bash
npm install --save-dev typescript @types/react @types/node

Then rename any .js file to .tsx, and Next.js auto-generates tsconfig.json.

✅ Type safety for better development

📌 6. Adding ESLint & Prettier

To maintain clean code:

bash
npm install --save-dev eslint prettier eslint-config-next

Then create .eslintrc.json:

json
: ["next/core-web-vitals"]}

Run ESLint:

bashnpm run lint

✅ Ensures best practices

📌 7. Setting Up Custom Next.js Configuration

Modify next.config.js to customize settings.

🔹 Example: Enabling Image Optimization

javascript
module.exports = {  images: {    domains: ["example.com"],  },};

✅ Optimizes external images

📌 8. Debugging in Next.js

Enable debugging in VS Code:

1. Create .vscode/launch.json

json
{  "version": "0.2.0",  "configurations": [    {      "name": "Next.js Debugging",      "type": "node",      "request": "attach",      "port": 9229,      "sourceMaps": true,      "protocol": "inspector"    }  ]}

2. Start the app with:

bash
NODE_OPTIONS='--inspect' next dev

✅ Enables debugging inside VS Code

📌 9. Using Docker for Next.js

Create a Dockerfile:

dockerfile
FROM node:18-alpineWORKDIR /appCOPY package.json yarn.lock ./RUN yarn installCOPY . .RUN yarn buildCMD ["yarn", "start"]

Build & run the container:

bash
docker build -t my-next-app .docker run -p 3000:3000 my-next-app

✅ Useful for deploying in containers

📌 10. Summary: Key Environment Setup Steps