# NextJS

{{#include ../../banners/hacktricks-training.md}}

## Muundo wa Jumla wa Programu ya Next.js

### Muundo wa Kawaida wa Faili

Mradi wa kawaida wa Next.js unafuata muundo maalum wa faili na saraka ambao unarahisisha vipengele vyake kama vile urambazaji, mwisho wa API, na usimamizi wa mali za statiki. Hapa kuna mpangilio wa kawaida:
```lua
my-nextjs-app/
├── node_modules/
├── public/
│   ├── images/
│   │   └── logo.png
│   └── favicon.ico
├── app/
│   ├── api/
│   │   └── hello/
│   │       └── route.ts
│   ├── layout.tsx
│   ├── page.tsx
│   ├── about/
│   │   └── page.tsx
│   ├── dashboard/
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   ├── Header.tsx
│   │   └── Footer.tsx
│   ├── styles/
│   │   ├── globals.css
│   │   └── Home.module.css
│   └── utils/
│       └── api.ts
├── .env.local
├── next.config.js
├── tsconfig.json
├── package.json
├── README.md
└── yarn.lock / package-lock.json

```
### Core Directories and Files

- **public/:** Inahifadhi mali za statiki kama picha, fonti, na faili nyingine. Faili hapa zinapatikana kwenye njia ya mzizi (`/`).
- **app/:** Kadiria kuu kwa kurasa za programu yako, mipangilio, vipengele, na njia za API. Inakumbatia dhana ya **App Router**, ikiruhusu vipengele vya hali ya juu vya urambazaji na kutenganisha vipengele vya seva na mteja.
- **app/layout.tsx:** Inaelezea mpangilio wa mzizi kwa programu yako, ikizunguka kurasa zote na kutoa vipengele vya UI vinavyofanana kama vichwa, miguu, na baa za urambazaji.
- **app/page.tsx:** Inatumika kama kiingilio kwa njia ya mzizi `/`, ikionyesha ukurasa wa nyumbani.
- **app/\[route]/page.tsx:** Inashughulikia njia za statiki na za dinamik. Kila folda ndani ya `app/` inawakilisha sehemu ya njia, na `page.tsx` ndani ya folda hizo inahusiana na kipengele cha njia.
- **app/api/:** Inajumuisha njia za API, ikiruhusu kuunda kazi zisizo na seva zinazoshughulikia maombi ya HTTP. Njia hizi zinachukua nafasi ya folda ya jadi `pages/api`.
- **app/components/:** Inahifadhi vipengele vya React vinavyoweza kutumika tena katika kurasa na mipangilio tofauti.
- **app/styles/:** Inajumuisha faili za CSS za kimataifa na Moduli za CSS kwa uandaaji wa mtindo wa kipengele.
- **app/utils/:** Inajumuisha kazi za matumizi, moduli za msaada, na mantiki nyingine zisizo za UI ambazo zinaweza kushirikiwa katika programu.
- **.env.local:** Inahifadhi mabadiliko ya mazingira maalum kwa mazingira ya maendeleo ya ndani. Mabadiliko haya **hayajumuishwi** katika udhibiti wa toleo.
- **next.config.js:** Inaboresha tabia ya Next.js, ikiwa ni pamoja na usanidi wa webpack, mabadiliko ya mazingira, na mipangilio ya usalama.
- **tsconfig.json:** Inapanga mipangilio ya TypeScript kwa mradi, ikiruhusu ukaguzi wa aina na vipengele vingine vya TypeScript.
- **package.json:** Inasimamia utegemezi wa mradi, skripti, na metadata.
- **README.md:** Inatoa hati na taarifa kuhusu mradi, ikiwa ni pamoja na maelekezo ya usanidi, miongozo ya matumizi, na maelezo mengine muhimu.
- **yarn.lock / package-lock.json:** Inafunga utegemezi wa mradi kwa toleo maalum, kuhakikisha usakinishaji thabiti katika mazingira tofauti.

## Client-Side in Next.js

### File-Based Routing in the `app` Directory

Folda ya `app` ni msingi wa urambazaji katika toleo jipya la Next.js. Inatumia mfumo wa faili kufafanua njia, ikifanya usimamizi wa njia kuwa rahisi na wa kupanuka.

<details>

<summary>Handling the Root Path /</summary>

**File Structure:**
```arduino
my-nextjs-app/
├── app/
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...
```
**Key Files:**

- **`app/page.tsx`**: Inashughulikia maombi kwa njia ya mizizi `/`.
- **`app/layout.tsx`**: Inaelezea mpangilio wa programu, ikizunguka kurasa zote.

**Implementation:**
```tsx
tsxCopy code// app/page.tsx

export default function HomePage() {
return (
<div>
<h1>Welcome to the Home Page!</h1>
<p>This is the root route.</p>
</div>
);
}
```
**Maelezo:**

- **Mwelekeo wa Njia:** Faili `page.tsx` iliyo moja kwa moja chini ya saraka ya `app` inahusiana na njia ya `/`.
- **Uwasilishaji:** Kipengele hiki kinatoa maudhui ya ukurasa wa nyumbani.
- **Ujumuishaji wa Mpangilio:** Kipengele cha `HomePage` kimefungwa na `layout.tsx`, ambayo inaweza kujumuisha vichwa, miguu, na vipengele vingine vya kawaida.

</details>

<details>

<summary>Kushughulikia Njia Nyingine za Kawaida</summary>

**Mfano: Njia ya `/about`**

**Muundo wa Faili:**
```arduino
arduinoCopy codemy-nextjs-app/
├── app/
│   ├── about/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...
```
**Utekelezaji:**
```tsx
// app/about/page.tsx

export default function AboutPage() {
return (
<div>
<h1>About Us</h1>
<p>Learn more about our mission and values.</p>
</div>
)
}
```
**Maelezo:**

- **Mwelekeo wa Njia:** Faili `page.tsx` ndani ya folda `about` inahusiana na njia ya `/about`.
- **Uwasilishaji:** Kichanganuzi hiki kinatoa maudhui ya ukurasa wa kuhusu.

</details>

<details>

<summary>Njia za Kijidudu</summary>

Njia za kijidudu zinaruhusu kushughulikia njia zenye sehemu zinazobadilika, zikifanya programu kuonyesha maudhui kulingana na vigezo kama vitambulisho, slugs, n.k.

**Mfano: Njia ya `/posts/[id]`**

**Muundo wa Faili:**
```arduino
arduinoCopy codemy-nextjs-app/
├── app/
│   ├── posts/
│   │   └── [id]/
│   │       └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...
```
**Utekelezaji:**
```tsx
tsxCopy code// app/posts/[id]/page.tsx

import { useRouter } from 'next/navigation';

interface PostProps {
params: { id: string };
}

export default function PostPage({ params }: PostProps) {
const { id } = params;
// Fetch post data based on 'id'

return (
<div>
<h1>Post #{id}</h1>
<p>This is the content of post {id}.</p>
</div>
);
}
```
**Maelezo:**

- **Sehemu ya Kijani:** `[id]` inaashiria sehemu ya kijani katika njia, ikichukua parameter ya `id` kutoka URL.
- **Kupata Parameta:** Kitu cha `params` kina parameta za kijani, zinazopatikana ndani ya kipengee.
- **Kulinganisha Njia:** Njia yoyote inayolingana na `/posts/*`, kama vile `/posts/1`, `/posts/abc`, nk, itashughulikiwa na kipengee hiki.

</details>

<details>

<summary>Njia Zilizopangwa Ndani</summary>

Next.js inasaidia njia zilizopangwa ndani, ikiruhusu muundo wa njia wa kihierarkia unaofanana na mpangilio wa saraka.

**Mfano: Njia ya `/dashboard/settings/profile`**

**Muundo wa Faili:**
```arduino
arduinoCopy codemy-nextjs-app/
├── app/
│   ├── dashboard/
│   │   ├── settings/
│   │   │   └── profile/
│   │   │       └── page.tsx
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...
```
**Utekelezaji:**
```tsx
tsxCopy code// app/dashboard/settings/profile/page.tsx

export default function ProfileSettingsPage() {
return (
<div>
<h1>Profile Settings</h1>
<p>Manage your profile information here.</p>
</div>
);
}
```
**Maelezo:**

- **Kuweka Ndani kwa Kina:** Faili ya `page.tsx` ndani ya `dashboard/settings/profile/` inahusiana na njia ya `/dashboard/settings/profile`.
- **Kuakisi Hifadhi:** Muundo wa saraka unaakisi njia ya URL, ukiongeza uwezo wa kudumisha na uwazi.

</details>

<details>

<summary>Njia za Catch-All</summary>

Njia za catch-all hushughulikia sehemu nyingi zilizowekwa ndani au njia zisizojulikana, zikitoa kubadilika katika usimamizi wa njia.

**Mfano: `/*` Njia**

**Muundo wa Faili:**
```arduino
my-nextjs-app/
├── app/
│   ├── [..slug]/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...
```
**Utekelezaji:**
```tsx
// app/[...slug]/page.tsx

interface CatchAllProps {
params: { slug: string[] }
}

export default function CatchAllPage({ params }: CatchAllProps) {
const { slug } = params
const fullPath = `/${slug.join("/")}`

return (
<div>
<h1>Catch-All Route</h1>
<p>You have navigated to: {fullPath}</p>
</div>
)
}
```
**Maelezo:**

- **Sehemu ya Catch-All:** `[...slug]` inakamata sehemu zote zilizobaki za njia kama array.
- **Matumizi:** Inafaida kwa kushughulikia hali za urambazaji wa dinamik kama vile njia zinazozalishwa na mtumiaji, makundi yaliyo ndani, n.k.
- **Ulinganifu wa Njia:** Njia kama `/anything/here`, `/foo/bar/baz`, n.k., zinashughulikiwa na kipengele hiki.

</details>

### Hatari Zinazoweza Kutokea Kwenye Upande wa Mteja

Ingawa Next.js inatoa msingi salama, mbinu mbaya za uandishi zinaweza kuleta hatari. Hatari kuu za upande wa mteja ni pamoja na:

<details>

<summary>Cross-Site Scripting (XSS)</summary>

Mashambulizi ya XSS yanatokea wakati scripts za uhalifu zinapowekwa kwenye tovuti zinazotegemewa. Washambuliaji wanaweza kutekeleza scripts kwenye vivinjari vya watumiaji, wakipora data au kufanya vitendo kwa niaba ya mtumiaji.

**Mfano wa Kanuni Ilio na Hatari:**
```jsx
// Dangerous: Injecting user input directly into HTML
function Comment({ userInput }) {
return <div dangerouslySetInnerHTML={{ __html: userInput }} />
}
```
**Kwa Nini Inahatarisha:** Kutumia `dangerouslySetInnerHTML` na pembejeo zisizoaminika kunaruhusu washambuliaji kuingiza scripts zenye uharibifu.

</details>

<details>

<summary>Kuingiza Kiolezo Kwenye Upande wa Mteja</summary>

Hutokea wakati pembejeo za mtumiaji hazishughulikiwi ipasavyo katika violezo, kuruhusu washambuliaji kuingiza na kutekeleza violezo au maelezo.

**Mfano wa Kanuni Inayohatarisha:**
```jsx
import React from "react"
import ejs from "ejs"

function RenderTemplate({ template, data }) {
const html = ejs.render(template, data)
return <div dangerouslySetInnerHTML={{ __html: html }} />
}
```
**Kwa Nini Inahatarisha:** Ikiwa `template` au `data` inajumuisha maudhui mabaya, inaweza kusababisha utekelezaji wa msimbo usio kusudiwa.

</details>

<details>

<summary>Safari ya Kliendi ya Kupanua</summary>

Ni udhaifu unaowezesha washambuliaji kubadilisha njia za upande wa mteja ili kufanya vitendo visivyo kusudiwa, kama vile Cross-Site Request Forgery (CSRF). Tofauti na safari ya kupanua upande wa seva, ambayo inalenga mfumo wa faili wa seva, CSPT inazingatia kutumia mitambo ya upande wa mteja ili kuelekeza maombi halali ya API kwa maeneo mabaya.

**Mfano wa Msimbo Ulio na Udhaifu:**

Programu ya Next.js inaruhusu watumiaji kupakia na kupakua faili. Kipengele cha kupakua kimewekwa kwenye upande wa mteja, ambapo watumiaji wanaweza kubainisha njia ya faili ya kupakua.
```jsx
// pages/download.js
import { useState } from "react"

export default function DownloadPage() {
const [filePath, setFilePath] = useState("")

const handleDownload = () => {
fetch(`/api/files/${filePath}`)
.then((response) => response.blob())
.then((blob) => {
const url = window.URL.createObjectURL(blob)
const a = document.createElement("a")
a.href = url
a.download = filePath
a.click()
})
}

return (
<div>
<h1>Download File</h1>
<input
type="text"
value={filePath}
onChange={(e) => setFilePath(e.target.value)}
placeholder="Enter file path"
/>
<button onClick={handleDownload}>Download</button>
</div>
)
}
```
#### Attack Scenario

1. **Malengo ya Mshambuliaji**: Fanya shambulio la CSRF kufuta faili muhimu (mfano, `admin/config.json`) kwa kubadilisha `filePath`.
2. **Kunutumia CSPT**:
- **Ingizo Mbaya**: Mshambuliaji anaunda URL yenye `filePath` iliyobadilishwa kama `../deleteFile/config.json`.
- **Kuitwa kwa API**: Msimbo wa upande wa mteja unafanya ombi kwa `/api/files/../deleteFile/config.json`.
- **Ushughulikiaji wa Server**: Ikiwa server haitathmini `filePath`, inashughulikia ombi hilo, huenda ikafuta au kufichua faili nyeti.
3. **Kutekeleza CSRF**:
- **Kiungo Kilichoundwa**: Mshambuliaji anamtumia mwathirika kiungo au kuingiza script mbaya inayosababisha ombi la kupakua kwa `filePath` iliyobadilishwa.
- **Matokeo**: Mwathirika anatekeleza kitendo bila kujua, na kusababisha ufikiaji au ufutaji wa faili usioidhinishwa.

#### Kwa Nini Ni Hatari

- **Ukosefu wa Uthibitisho wa Ingizo**: Upande wa mteja unaruhusu ingizo la `filePath` bila mipaka, kuruhusu kupita njia.
- **Kukubali Ingizo la Mteja**: API ya upande wa server inakubali na kushughulikia `filePath` bila kusafisha.
- **Hatari za Vitendo vya API**: Ikiwa mwisho wa API unafanya vitendo vinavyobadilisha hali (mfano, kufuta, kubadilisha faili), inaweza kutumika vibaya kupitia CSPT.

</details>

## Server-Side katika Next.js

### Uwasilishaji wa Upande wa Server (SSR)

Kurasa zinatengenezwa kwenye server kwa kila ombi, kuhakikisha kwamba mtumiaji anapata HTML iliyotengenezwa kikamilifu. Katika kesi hii unapaswa kuunda server yako ya kawaida ili kushughulikia maombi.

**Matumizi:**

- Maudhui ya kidinamik ambayo yanabadilika mara kwa mara.
- Uboreshaji wa SEO, kwani injini za utafutaji zinaweza kupita kurasa zilizotengenezwa kikamilifu.

**Utekelezaji:**
```jsx
// pages/index.js
export async function getServerSideProps(context) {
const res = await fetch("https://api.example.com/data")
const data = await res.json()
return { props: { data } }
}

function HomePage({ data }) {
return <div>{data.title}</div>
}

export default HomePage
```
### Static Site Generation (SSG)

Pages are pre-rendered at build time, resulting in faster load times and reduced server load.

**Use Cases:**

- Maudhui ambayo hayabadiliki mara kwa mara.
- Blogu, nyaraka, kurasa za masoko.

**Implementation:**
```jsx
// pages/index.js
export async function getStaticProps() {
const res = await fetch("https://api.example.com/data")
const data = await res.json()
return { props: { data }, revalidate: 60 } // Revalidate every 60 seconds
}

function HomePage({ data }) {
return <div>{data.title}</div>
}

export default HomePage
```
### Serverless Functions (API Routes)

Next.js inaruhusu uundaji wa mwisho wa API kama kazi zisizo na seva. Kazi hizi zinafanyika kwa mahitaji bila haja ya seva maalum.

**Matumizi:**

- Kushughulikia uwasilishaji wa fomu.
- Kuingiliana na hifadhidata.
- Kusaidia data au kuunganishwa na APIs za wahusika wengine.

**Utekelezaji:**

Kwa kuanzishwa kwa saraka ya `app` katika Next.js 13, urambazaji na usimamizi wa API umekuwa rahisi zaidi na wenye nguvu. Njia hii ya kisasa inalingana kwa karibu na mfumo wa urambazaji wa faili lakini inatoa uwezo ulioimarishwa, ikiwa ni pamoja na msaada wa vipengele vya seva na mteja.

#### Mshughulikiaji wa Njia ya Msingi

**Muundo wa Faili:**
```go
my-nextjs-app/
├── app/
│   └── api/
│       └── hello/
│           └── route.js
├── package.json
└── ...
```
**Utekelezaji:**
```javascript
// app/api/hello/route.js

export async function POST(request) {
return new Response(JSON.stringify({ message: "Hello from App Router!" }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

// Client-side fetch to access the API endpoint
fetch("/api/submit", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "John Doe" }),
})
.then((res) => res.json())
.then((data) => console.log(data))
```
**Maelezo:**

- **Mahali:** Njia za API ziko chini ya saraka ya `app/api/`.
- **Ujumbe wa Faili:** Kila mwisho wa API unapatikana katika saraka yake mwenyewe inayokuwa na faili ya `route.js` au `route.ts`.
- **Kazi Zilizotolewa:** Badala ya uhamisho mmoja wa kawaida, kazi maalum za mbinu za HTTP (mfano, `GET`, `POST`) zinahamishwa.
- **Usimamizi wa Majibu:** Tumia mjenzi wa `Response` kurudisha majibu, ikiruhusu udhibiti zaidi juu ya vichwa na nambari za hali.

#### Jinsi ya kushughulikia njia na mbinu nyingine:

<details>

<summary>Kushughulikia Mbinu Maalum za HTTP</summary>

Next.js 13+ inakuwezesha kufafanua wasimamizi wa mbinu maalum za HTTP ndani ya faili hiyo hiyo ya `route.js` au `route.ts`, ikihamasisha msimbo kuwa wazi na uliopangwa vizuri.

**Mfano:**
```javascript
// app/api/users/[id]/route.js

export async function GET(request, { params }) {
const { id } = params
// Fetch user data based on 'id'
return new Response(JSON.stringify({ userId: id, name: "Jane Doe" }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

export async function PUT(request, { params }) {
const { id } = params
// Update user data based on 'id'
return new Response(JSON.stringify({ message: `User ${id} updated.` }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

export async function DELETE(request, { params }) {
const { id } = params
// Delete user based on 'id'
return new Response(JSON.stringify({ message: `User ${id} deleted.` }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}
```
**Maelezo:**

- **Mauzo Mengi:** Kila njia ya HTTP (`GET`, `PUT`, `DELETE`) ina kazi yake iliyosafirishwa.
- **Vigezo:** Hoja ya pili inatoa ufikiaji wa vigezo vya njia kupitia `params`.
- **Majibu Yaliyoimarishwa:** Udhibiti mkubwa zaidi juu ya vitu vya majibu, kuruhusu usimamizi sahihi wa kichwa na msimbo wa hali.

</details>

<details>

<summary>Njia za Catch-All na Njia za Ndani</summary>

Next.js 13+ inasaidia vipengele vya hali ya juu vya urambazaji kama vile njia za catch-all na njia za API za ndani, kuruhusu muundo wa API wenye nguvu na unaoweza kupanuka.

**Mfano wa Njia ya Catch-All:**
```javascript
// app/api/[...slug]/route.js

export async function GET(request, { params }) {
const { slug } = params
// Handle dynamic nested routes
return new Response(JSON.stringify({ slug }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}
```
**Maelezo:**

- **Sintaksia:** `[...]` inaashiria sehemu ya kukamata yote, ikichukua njia zote za ndani.
- **Matumizi:** Inafaida kwa APIs ambazo zinahitaji kushughulikia kina tofauti za njia au sehemu za kidinamik. 

**Mfano wa Njia za Ndani:**
```javascript
// app/api/posts/[postId]/comments/[commentId]/route.js

export async function GET(request, { params }) {
const { postId, commentId } = params
// Fetch specific comment for a post
return new Response(
JSON.stringify({ postId, commentId, comment: "Great post!" }),
{
status: 200,
headers: { "Content-Type": "application/json" },
}
)
}
```
**Maelezo:**

- **Kuweka Ndani kwa Kina:** Inaruhusu muundo wa API wa kihierarkia, unaoonyesha uhusiano wa rasilimali.
- **Upatikanaji wa Vigezo:** Rahisi kupata vigezo vingi vya njia kupitia kitu cha `params`.

</details>

<details>

<summary>Kushughulikia njia za API katika Next.js 12 na Zamani</summary>

## Njia za API katika Katalogi ya `pages` (Next.js 12 na Zamani)

Kabla ya Next.js 13 kuanzisha katalogi ya `app` na kuboresha uwezo wa njia, njia za API zilikuwa zikiwekwa hasa ndani ya katalogi ya `pages`. Njia hii bado inatumika sana na inaungwa mkono katika Next.js 12 na toleo la zamani.

#### Njia ya Msingi ya API

**Muundo wa Faili:**
```go
goCopy codemy-nextjs-app/
├── pages/
│   └── api/
│       └── hello.js
├── package.json
└── ...
```
**Utekelezaji:**
```javascript
javascriptCopy code// pages/api/hello.js

export default function handler(req, res) {
res.status(200).json({ message: 'Hello, World!' });
}
```
**Maelezo:**

- **Mahali:** Njia za API ziko chini ya saraka ya `pages/api/`.
- **Usafirishaji:** Tumia `export default` kufafanua kazi ya kushughulikia.
- **Saini ya Kazi:** Kazi ya kushughulikia inapata vitu vya `req` (ombio la HTTP) na `res` (jibu la HTTP).
- **Uelekeo:** Jina la faili (`hello.js`) linafanana na mwisho wa `/api/hello`.

#### Njia za API za Kijadi
```bash
bashCopy codemy-nextjs-app/
├── pages/
│   └── api/
│       └── users/
│           └── [id].js
├── package.json
└── ...
```
**Utekelezaji:**
```javascript
javascriptCopy code// pages/api/users/[id].js

export default function handler(req, res) {
const {
query: { id },
method,
} = req;

switch (method) {
case 'GET':
// Fetch user data based on 'id'
res.status(200).json({ userId: id, name: 'John Doe' });
break;
case 'PUT':
// Update user data based on 'id'
res.status(200).json({ message: `User ${id} updated.` });
break;
case 'DELETE':
// Delete user based on 'id'
res.status(200).json({ message: `User ${id} deleted.` });
break;
default:
res.setHeader('Allow', ['GET', 'PUT', 'DELETE']);
res.status(405).end(`Method ${method} Not Allowed`);
}
}
```
**Maelezo:**

- **Sehemu za Kijidudu:** Mipaka ya mraba (`[id].js`) inaashiria sehemu za njia za kijidudu.
- **Kupata Parameta:** Tumia `req.query.id` kupata parameta ya kijidudu.
- **Kushughulikia Mbinu:** Tumia mantiki ya masharti kushughulikia mbinu tofauti za HTTP (`GET`, `PUT`, `DELETE`, n.k.).

#### Kushughulikia Mbinu Tofauti za HTTP

Wakati mfano wa msingi wa njia ya API unashughulikia mbinu zote za HTTP ndani ya kazi moja, unaweza kuunda muundo wa msimbo wako kushughulikia kila mbinu kwa uwazi zaidi na kudumisha. 

**Mfano:**
```javascript
javascriptCopy code// pages/api/posts.js

export default async function handler(req, res) {
const { method } = req;

switch (method) {
case 'GET':
// Handle GET request
res.status(200).json({ message: 'Fetching posts.' });
break;
case 'POST':
// Handle POST request
res.status(201).json({ message: 'Post created.' });
break;
default:
res.setHeader('Allow', ['GET', 'POST']);
res.status(405).end(`Method ${method} Not Allowed`);
}
}
```
**Best Practices:**

- **Separation of Concerns:** Tenganisha wazi mantiki kwa njia tofauti za HTTP.
- **Response Consistency:** Hakikisha muundo wa majibu ni thabiti kwa urahisi wa kushughulikia upande wa mteja.
- **Error Handling:** Shughulikia kwa ustadi mbinu zisizosaidiwa na makosa yasiyotarajiwa.

</details>

### CORS Configuration

Dhibiti ni vyanzo vipi vinaweza kufikia njia zako za API, kupunguza hatari za Cross-Origin Resource Sharing (CORS).

**Bad Configuration Example:**
```javascript
// app/api/data/route.js

export async function GET(request) {
return new Response(JSON.stringify({ data: "Public Data" }), {
status: 200,
headers: {
"Access-Control-Allow-Origin": "*", // Allows any origin
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
},
})
}
```
Kumbuka kwamba **CORS inaweza pia kuanzishwa katika njia zote za API** ndani ya faili ya **`middleware.ts`**:
```javascript
// app/middleware.ts

import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export function middleware(request: NextRequest) {
const allowedOrigins = [
"https://yourdomain.com",
"https://sub.yourdomain.com",
]
const origin = request.headers.get("Origin")

const response = NextResponse.next()

if (allowedOrigins.includes(origin || "")) {
response.headers.set("Access-Control-Allow-Origin", origin || "")
response.headers.set(
"Access-Control-Allow-Methods",
"GET, POST, PUT, DELETE, OPTIONS"
)
response.headers.set(
"Access-Control-Allow-Headers",
"Content-Type, Authorization"
)
// If credentials are needed:
// response.headers.set('Access-Control-Allow-Credentials', 'true');
}

// Handle preflight requests
if (request.method === "OPTIONS") {
return new Response(null, {
status: 204,
headers: response.headers,
})
}

return response
}

export const config = {
matcher: "/api/:path*", // Apply to all API routes
}
```
**Tatizo:**

- **`Access-Control-Allow-Origin: '*'`:** Inaruhusu tovuti yoyote kufikia API, ambayo inaweza kuruhusu tovuti mbaya kuingiliana na API yako bila vizuizi.
- **Ruhusa Mpana ya Mbinu:** Kuruhusu mbinu zote kunaweza kuwezesha washambuliaji kufanya vitendo visivyotakiwa.

**Jinsi washambuliaji wanavyotumia:**

Washambuliaji wanaweza kuunda tovuti mbaya zinazofanya maombi kwa API yako, ambazo zinaweza kutumia kazi kama vile urejeleaji wa data, urekebishaji wa data, au kuanzisha vitendo visivyotakiwa kwa niaba ya watumiaji walioidhinishwa.

{{#ref}}
../../pentesting-web/cors-bypass.md
{{#endref}}

### Ufunuo wa msimbo wa seva katika Upande wa Mteja

Ni rahisi **kutumia msimbo unaotumiwa na seva pia katika msimbo uliofunuliwa na kutumiwa na upande wa mteja**, njia bora ya kuhakikisha kuwa faili ya msimbo haitafichuliwa kamwe katika upande wa mteja ni kwa kutumia uagizaji huu mwanzoni mwa faili:
```js
import "server-only"
```
## Fail Muhimu na Majukumu Yao

### `middleware.ts` / `middleware.js`

**Mahali:** Mizizi ya mradi au ndani ya `src/`.

**Madhumuni:** Inatekeleza msimbo katika kazi isiyo na seva upande wa seva kabla ya ombi kushughulikiwa, ikiruhusu kazi kama uthibitishaji, kuelekeza, au kubadilisha majibu.

**Mchakato wa Utekelezaji:**

1. **Ombi Linalokuja:** Middleware inakamata ombi.
2. **Usindikaji:** Inatekeleza operesheni kulingana na ombi (mfano, angalia uthibitishaji).
3. **Kubadilisha Jibu:** Inaweza kubadilisha jibu au kupitisha udhibiti kwa mpangaji anayefuata.

**Mifano ya Matumizi:**

- Kuelekeza watumiaji wasio na uthibitisho.
- Kuongeza vichwa vya kawaida.
- Kurekodi maombi.

**Mifano ya Usanidi:**
```typescript
// middleware.ts
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export function middleware(req: NextRequest) {
const url = req.nextUrl.clone()
if (!req.cookies.has("token")) {
url.pathname = "/login"
return NextResponse.redirect(url)
}
return NextResponse.next()
}

export const config = {
matcher: ["/protected/:path*"],
}
```
### `next.config.js`

**Location:** Root of the project.

**Purpose:** Inafanya usanidi wa Next.js, ikiwemo kuwezesha au kuzima vipengele, kubinafsisha usanidi wa webpack, kuweka mabadiliko ya mazingira, na kuunda usanidi wa vipengele kadhaa vya usalama.

**Key Security Configurations:**

<details>

<summary>Security Headers</summary>

Vichwa vya usalama vinaboresha usalama wa programu yako kwa kutoa maelekezo kwa vivinjari jinsi ya kushughulikia maudhui. Vinasaidia kupunguza mashambulizi mbalimbali kama vile Cross-Site Scripting (XSS), Clickjacking, na MIME type sniffing:

- Content Security Policy (CSP)
- X-Frame-Options
- X-Content-Type-Options
- Strict-Transport-Security (HSTS)
- Referrer Policy

**Examples:**
```javascript
// next.config.js

module.exports = {
async headers() {
return [
{
source: "/(.*)", // Apply to all routes
headers: [
{
key: "X-Frame-Options",
value: "DENY",
},
{
key: "Content-Security-Policy",
value:
"default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval';",
},
{
key: "X-Content-Type-Options",
value: "nosniff",
},
{
key: "Strict-Transport-Security",
value: "max-age=63072000; includeSubDomains; preload", // Enforces HTTPS
},
{
key: "Referrer-Policy",
value: "no-referrer", // Completely hides referrer
},
// Additional headers...
],
},
]
},
}
```
</details>

<details>

<summary>Image Optimization Settings</summary>

Next.js inaboresha picha kwa utendaji, lakini mipangilio isiyo sahihi inaweza kusababisha udhaifu wa usalama, kama kuruhusu vyanzo visivyoaminika kuingiza maudhui mabaya.

**Mfano wa Mipangilio Mbaya:**
```javascript
// next.config.js

module.exports = {
images: {
domains: ["*"], // Allows images from any domain
},
}
```
**Tatizo:**

- **`'*'`:** Inaruhusu picha kupakuliwa kutoka chanzo chochote cha nje, ikiwa ni pamoja na maeneo yasiyoaminika au ya uhalifu. Washambuliaji wanaweza kuhifadhi picha zenye mzigo wa uhalifu au maudhui yanayopotosha watumiaji.
- Tatizo lingine linaweza kuwa kuruhusu kikoa **ambacho mtu yeyote anaweza kupakia picha** (kama `raw.githubusercontent.com`)

**Jinsi washambuliaji wanavyolitumia:**

Kwa kuingiza picha kutoka vyanzo vya uhalifu, washambuliaji wanaweza kufanya mashambulizi ya phishing, kuonyesha taarifa zinazopotosha, au kutumia udhaifu katika maktaba za uwasilishaji wa picha.

</details>

<details>

<summary>Ufunuo wa Mabadiliko ya Mazingira</summary>

Simamia taarifa nyeti kama funguo za API na akreditivu za hifadhidata kwa usalama bila kuzifunua kwa mteja.

#### a. Kuweka Mabadiliko Nyeti Hatarini

**Mfano Mbaya wa Usanidi:**
```javascript
// next.config.js

module.exports = {
env: {
SECRET_API_KEY: process.env.SECRET_API_KEY, // Exposed to the client
NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL, // Correctly prefixed for client
},
}
```
**Tatizo:**

- **`SECRET_API_KEY`:** Bila kiambishi cha `NEXT_PUBLIC_`, Next.js haiwezeshi mabadiliko kwa mteja. Hata hivyo, ikiwa kwa bahati mbaya imewekwa kiambishi (mfano, `NEXT_PUBLIC_SECRET_API_KEY`), inakuwa inapatikana upande wa mteja.

**Jinsi washambuliaji wanavyotumia:**

Ikiwa mabadiliko ya nyeti yanapatikana kwa mteja, washambuliaji wanaweza kuyapata kwa kuchunguza msimbo wa upande wa mteja au maombi ya mtandao, wakipata ufikiaji usioidhinishwa kwa APIs, hifadhidata, au huduma nyingine.

</details>

<details>

<summary>Redirects</summary>

Simamisha uelekezaji wa URL na uandishi ndani ya programu yako, kuhakikisha kwamba watumiaji wanapelekwa ipasavyo bila kuanzisha udhaifu wa uelekezaji wazi.

#### a. Udhaifu wa Uelekezaji Wazi

**Mfano Mbaya wa Usanidi:**
```javascript
// next.config.js

module.exports = {
async redirects() {
return [
{
source: "/redirect",
destination: (req) => req.query.url, // Dynamically redirects based on query parameter
permanent: false,
},
]
},
}
```
**Tatizo:**

- **Kikundi Kinachobadilika:** Inaruhusu watumiaji kubaini URL yoyote, ikiruhusu mashambulizi ya kuhamasisha wazi.
- **Kukubali Kuingiza kwa Mtumiaji:** Kupeleka kwenye URL zinazotolewa na watumiaji bila uthibitisho kunaweza kusababisha ulaghai, usambazaji wa programu hasidi, au wizi wa akidi.

**Jinsi washambuliaji wanavyotumia:**

Washambuliaji wanaweza kuunda URL ambazo zinaonekana kama zinatoka kwenye eneo lako lakini zinawapeleka watumiaji kwenye tovuti zenye uharibifu. Kwa mfano:
```bash
https://yourdomain.com/redirect?url=https://malicious-site.com
```
Watumiaji wanaoamini kikoa cha asili wanaweza bila kujua kuingia kwenye tovuti hatari.

</details>

<details>

<summary>Webpack Configuration</summary>

Binafsisha mipangilio ya Webpack kwa programu yako ya Next.js, ambayo inaweza bila kukusudia kuleta udhaifu wa usalama ikiwa haitashughulikiwa kwa uangalifu.

#### a. Kuweka Moduli Nyeti Hadharani

**Mfano Mbaya wa Mipangilio:**
```javascript
// next.config.js

module.exports = {
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.alias["@sensitive"] = path.join(__dirname, "secret-folder")
}
return config
},
}
```
**Tatizo:**

- **Kufichua Njia Nyeti:** Kuweka majina ya saraka nyeti na kuruhusu ufikiaji wa upande wa mteja kunaweza kufichua taarifa za siri.
- **Kufunga Siri:** Ikiwa faili nyeti zimefungwa kwa ajili ya mteja, maudhui yao yanakuwa yanaweza kupatikana kupitia ramani za chanzo au kuchunguza msimbo wa upande wa mteja.

**Jinsi washambuliaji wanavyotumia:**

Washambuliaji wanaweza kufikia au kujenga upya muundo wa saraka ya programu, na hivyo kupata na kutumia faili au data nyeti.

</details>

### `pages/_app.js` na `pages/_document.js`

#### **`pages/_app.js`**

**Madhumuni:** Inabadilisha kipengee cha App cha kawaida, ikiruhusu hali ya kimataifa, mitindo, na vipengee vya mpangilio.

**Matumizi:**

- Kuingiza CSS ya kimataifa.
- Kuongeza vifungashio vya mpangilio.
- Kuunganisha maktaba za usimamizi wa hali.

**Mfano:**
```jsx
// pages/_app.js
import "../styles/globals.css"

function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}

export default MyApp
```
#### **`pages/_document.js`**

**Madhumuni:** Inabadilisha Hati ya Kawaida, ikiruhusu kubadilisha lebo za HTML na Mwili.

**Matumizi:**

- Kubadilisha lebo za `<html>` au `<body>`.
- Kuongeza lebo za meta au scripts za kawaida.
- Kuunganisha fonti za wahusika wengine.

**Mfano:**
```jsx
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from "next/document"

class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>{/* Custom fonts or meta tags */}</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}

export default MyDocument
```
### Custom Server (Optional)

**Purpose:** Wakati Next.js inakuja na seva iliyojengwa ndani, unaweza kuunda seva ya kawaida kwa matumizi ya juu kama vile urambazaji wa kawaida au kuunganisha na huduma za nyuma zilizopo.

**Note:** Kutumia seva ya kawaida kunaweza kupunguza chaguzi za kutekeleza, hasa kwenye majukwaa kama Vercel ambayo yanaboresha seva iliyojengwa ndani ya Next.js.

**Example:**
```javascript
// server.js
const express = require("express")
const next = require("next")

const dev = process.env.NODE_ENV !== "production"
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
const server = express()

// Custom route
server.get("/a", (req, res) => {
return app.render(req, res, "/a")
})

// Default handler
server.all("*", (req, res) => {
return handle(req, res)
})

server.listen(3000, (err) => {
if (err) throw err
console.log("> Ready on http://localhost:3000")
})
})
```
---

## Maoni ya Ziada ya Muktadha na Usalama

### Mabadiliko ya Mazingira na Mipangilio

**Madhumuni:** Kudhibiti taarifa nyeti na mipangilio nje ya msingi wa msimbo.

**Mbinu Bora:**

- **Tumia Faili za `.env`:** Hifadhi mabadiliko kama funguo za API katika `.env.local` (imeondolewa kutoka udhibiti wa toleo).
- **Fikia Mabadiliko kwa Usalama:** Tumia `process.env.VARIABLE_NAME` kufikia mabadiliko ya mazingira.
- **Usiweke Siri wazi kwa Mteja:** Hakikisha kwamba mabadiliko nyeti yanatumika tu upande wa seva.

**Mfano:**
```javascript
// next.config.js
module.exports = {
env: {
API_KEY: process.env.API_KEY, // Accessible on both client and server
SECRET_KEY: process.env.SECRET_KEY, // Be cautious if accessible on the client
},
}
```
**Note:** Ili kuzuia mabadiliko ya vigezo kwa upande wa seva pekee, acha vigezo hivyo kutoka kwenye `env` object au uweke kipengele `NEXT_PUBLIC_` kwa ajili ya kufichua kwa mteja.

### Authentication and Authorization

**Approach:**

- **Session-Based Authentication:** Tumia vidakuzi kusimamia vikao vya watumiaji.
- **Token-Based Authentication:** Tekeleza JWTs kwa ajili ya uthibitishaji usio na hali.
- **Third-Party Providers:** Unganisha na watoa huduma wa OAuth (mfano, Google, GitHub) kwa kutumia maktaba kama `next-auth`.

**Security Practices:**

- **Secure Cookies:** Weka sifa za `HttpOnly`, `Secure`, na `SameSite`.
- **Password Hashing:** Daima fanya hashing ya nywila kabla ya kuzihifadhi.
- **Input Validation:** Zuia mashambulizi ya kuingiza kwa kuthibitisha na kusafisha maoni.

**Example:**
```javascript
// pages/api/login.js
import { sign } from "jsonwebtoken"
import { serialize } from "cookie"

export default async function handler(req, res) {
const { username, password } = req.body

// Validate user credentials
if (username === "admin" && password === "password") {
const token = sign({ username }, process.env.JWT_SECRET, {
expiresIn: "1h",
})
res.setHeader(
"Set-Cookie",
serialize("auth", token, {
path: "/",
httpOnly: true,
secure: true,
sameSite: "strict",
})
)
res.status(200).json({ message: "Logged in" })
} else {
res.status(401).json({ error: "Invalid credentials" })
}
}
```
### Performance Optimization

**Strategies:**

- **Image Optimization:** Tumia kipengele cha `next/image` cha Next.js kwa ajili ya kuboresha picha kiotomatiki.
- **Code Splitting:** Tumia uagizaji wa dynamic ili kugawanya msimbo na kupunguza muda wa mzigo wa awali.
- **Caching:** Tekeleza mikakati ya caching kwa majibu ya API na mali za statiki.
- **Lazy Loading:** Pakia vipengele au mali tu wakati zinahitajika.

**Example:**
```jsx
// Dynamic Import with Code Splitting
import dynamic from "next/dynamic"

const HeavyComponent = dynamic(() => import("../components/HeavyComponent"), {
loading: () => <p>Loading...</p>,
})
```
{{#include ../../banners/hacktricks-training.md}}