Loading products...
; +} +``` + +Detailed loading and streaming concepts are covered in **Data Fetching & UI States**. + +--- + +## `error.tsx` + +`error.tsx` provides an error UI for a route segment. + +It must be a **Client Component**. + +```text +app/ +└── products/ + ├── error.tsx + └── page.tsx +``` + +Example: + +```tsx +"use client"; + +export default function Error({ + error, + reset, +}: { + error: Error; + reset: () => void; +}) { + return ( +
+```
+
+For optimized images in Next.js applications, the `next/image` component is generally preferred.
+
+---
+
+# 13. Configuration Files
+
+Several important project-level files are normally kept at the root of the project.
+
+```text
+my-next-app/
+├── next.config.ts
+├── package.json
+├── tsconfig.json
+└── .env
+```
+
+---
+
+## `next.config.ts`
+
+`next.config.ts` is used to customize Next.js behavior.
+
+Example:
+
+```ts
+const nextConfig = {
+ images: {
+ remotePatterns: [
+ {
+ protocol: "https",
+ hostname: "images.example.com",
+ },
+ ],
+ },
+};
+
+export default nextConfig;
+```
+
+Only add configuration when the project actually needs it.
+
+> Do not modify `next.config.ts` just because the file exists.
+
+---
+
+## `package.json`
+
+`package.json` contains project metadata, dependencies, development dependencies, and scripts.
+
+Common scripts include:
+
+```bash
+npm run dev
+npm run build
+npm run start
+```
+
+---
+
+## `tsconfig.json`
+
+`tsconfig.json` contains TypeScript compiler configuration.
+
+Next.js can create and configure this file when TypeScript is enabled in the project.
+
+---
+
+# 14. Environment Variables
+
+Environment variables allow configuration values to be stored outside the source code.
+
+Example:
+
+```env
+DATABASE_URL="..."
+API_SECRET="..."
+NEXT_PUBLIC_API_URL="https://api.example.com"
+```
+
+## Server-Only Variables
+
+Variables without the `NEXT_PUBLIC_` prefix are not automatically exposed to browser code.
+
+Example:
+
+```env
+DATABASE_URL="..."
+API_SECRET="..."
+```
+
+They can be accessed on the server:
+
+```ts
+const databaseUrl = process.env.DATABASE_URL;
+```
+
+## Browser-Exposed Variables
+
+Variables that need to be available in browser code must use the `NEXT_PUBLIC_` prefix.
+
+```env
+NEXT_PUBLIC_API_URL="https://api.example.com"
+```
+
+### Important
+
+Never put secrets in a `NEXT_PUBLIC_` variable.
+
+```env
+# ❌ Do not do this
+NEXT_PUBLIC_API_SECRET="my-secret"
+```
+
+Anything using the `NEXT_PUBLIC_` prefix can be exposed to client-side code.
+
+### `.env.example`
+
+`.env.example` is a template that shows which environment variables are required by the project.
+
+It contains the variable names, but should not contain real secrets.
+
+Example:
+
+```env
+DATABASE_URL=
+API_KEY=
+JWT_SECRET=
+NEXT_PUBLIC_API_URL=
+```
+
+---
+
+# 15. Recommended Project Structure
+
+For a new medium-sized App Router project, a good starting structure is:
+
+```text
+my-next-app/
+│
+├── src/
+│ ├── app/
+│ │ ├── layout.tsx
+│ │ ├── page.tsx
+│ │ ├── globals.css
+│ │ │
+│ │ ├── about/
+│ │ │ └── page.tsx
+│ │ │
+│ │ └── products/
+│ │ ├── page.tsx
+│ │ └── [id]/
+│ │ └── page.tsx
+│ │
+│ ├── components/
+│ │ ├── Navbar.tsx
+│ │ └── ProductCard.tsx
+│ │
+│ ├── lib/
+│ │ └── api.ts
+│ │
+│ └── hooks/
+│ └── useProducts.ts
+│
+├── public/
+│ └── images/
+│
+├── next.config.ts
+├── package.json
+├── tsconfig.json
+└── .env
+└── .env.example
+```
+
+The structure separates the main concerns:
+
+```text
+src/
+ ↓
+Application source code
+
+public/
+ ↓
+Static assets
+
+Root files/
+ ↓
+Configuration and project files
+```
+
+For a Pages Router project, the main difference is:
+
+```text
+src/app/
+ ↓
+src/pages/
+```
+
+---
+
+# Summary
+
+- Next.js has two routing systems: **Pages Router** and **App Router**.
+- The **Pages Router** uses `pages/` and is important for existing projects.
+- The **App Router** uses `app/` and is recommended for new projects.
+- A Pages Router route is usually created from a file such as `pages/about.tsx`.
+- An App Router route normally requires a `page.tsx` file.
+- `src/` is optional, but it is a useful convention for medium and large projects.
+- `public/` contains static assets.
+- `next.config.ts` is used to customize Next.js behavior.
+- Environment variables are commonly stored in `.env`, `.env.local`, `.env.development`, `.env.production`.
+- Never expose secrets using the `NEXT_PUBLIC_` prefix.
+- `components/`, `lib/`, and `hooks/` are useful organization conventions, but they are not required by Next.js.
+- Avoid unnecessary folders and configuration.
+- For new projects, **App Router + `src/`** is a recommended starting structure.
diff --git a/s3_full_stack_using_nextjs/02.project_setup_and_structure/assignment.md b/s3_full_stack_using_nextjs/02.project_setup_and_structure/assignment.md
new file mode 100644
index 00000000..b658680b
--- /dev/null
+++ b/s3_full_stack_using_nextjs/02.project_setup_and_structure/assignment.md
@@ -0,0 +1,42 @@
+# Project Setup & Structure — Assignments
+
+## Assignment 1 — App Router Project Structure
+
+**Title:** Create and Organize a Next.js App Router Project
+
+**Implementation:**
+
+- Create a new Next.js project with TypeScript, ESLint, App Router, import alias, and `src/` directory enabled
+- Inside `src/`, create three folders: `components/`, `lib/`, and `hooks/`
+- In `components/`, create a `Navbar` component returning a `