File Structure:

my-nextjs-app/
├── app/
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Sleutel Lêers:

• app/page.tsx: Hanteer versoeke na die wortelpad /.
• app/layout.tsx: Definieer die layout vir die toepassing en omsluit alle bladsye.

Implementering:

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>
);
}

Verduideliking:

• Roete-definisie: Die page.tsx lêer direk in die app gids ooreen met die / roete.
• Weergawering: Hierdie komponent gee die inhoud van die tuisblad weer.
• Layout-integrasie: Die HomePage komponent word deur die layout.tsx omhul, wat kopstukke, voetskrifte en ander algemene elemente kan insluit.

Voorbeeld: /about Roete

Lêerstruktuur:

arduinoCopy codemy-nextjs-app/
├── app/
│   ├── about/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Implementering:

// app/about/page.tsx

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

Verduideliking:

• Roete-definisie: Die page.tsx lêer in die about gids kom ooreen met die /about roete.
• Weergawing: Hierdie komponent gee die inhoud vir die about-bladsy weer.

Dinamiese roetes maak dit moontlik om paaie met veranderlike segmente te hanteer, sodat toepassings inhoud kan wys gebaseer op parameters soos IDs, slugs, ens.

Voorbeeld: /posts/[id] Route

Lêerstruktuur:

arduinoCopy codemy-nextjs-app/
├── app/
│   ├── posts/
│   │   └── [id]/
│   │       └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Implementering:

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>
);
}

Verduideliking:

• Dynamic Segment: [id] dui ’n dinamiese segment in die roete aan, wat die id parameter van die URL vasvang.
• Accessing Parameters: Die params object bevat die dinamiese parameters, toeganklik binne die komponent.
• Route Matching: Enige pad wat by /posts/* pas, soos /posts/1, /posts/abc, ens., sal deur hierdie komponent hanteer word.

Next.js ondersteun geneste routering, wat hiërargiese roetestrukture moontlik maak wat die gidsstruktuur weerspieël.

Example: /dashboard/settings/profile Route

Lêerstruktuur:

arduinoCopy codemy-nextjs-app/
├── app/
│   ├── dashboard/
│   │   ├── settings/
│   │   │   └── profile/
│   │   │       └── page.tsx
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Implementering:

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>
);
}

Verduideliking:

• Diepe nesteling: Die page.tsx lêer binne dashboard/settings/profile/ ooreenstem met die /dashboard/settings/profile roete.
• Weerspieëling van hiërargie: Die gidsstruktuur weerspieël die URL-pad, wat die onderhoudbaarheid en duidelikheid verbeter.

Catch-all-roetes hanteer veelvuldige geneste segmente of onbekende paaie, wat buigsaamheid in roetehantering bied.

Voorbeeld: /* Roete

Lêerstruktuur:

my-nextjs-app/
├── app/
│   ├── [..slug]/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Implementering:

// 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>
)
}

Verduideliking:

• Catch-All Segment: [...slug] vang al die oorblywende padsegmenten as ’n array.
• Gebruik: Nuttig vir die hantering van dinamiese routing-scenario’s soos gebruikersgegenereerde paaie, geneste kategorieë, ens.
• Roete-ooreenstemming: Paaie soos /anything/here, /foo/bar/baz, ens., word deur hierdie komponent hanteer.

XSS-aanvalle gebeur wanneer kwaadwillige scripts in vertroude webwerwe ingespuit word. Aanvallers kan scripts in gebruikers se blaaiers uitvoer, data steel of aksies namens die gebruiker uitvoer.

Voorbeeld van kwesbare kode:

// Dangerous: Injecting user input directly into HTML
function Comment({ userInput }) {
return <div dangerouslySetInnerHTML={{ __html: userInput }} />
}

Waarom dit kwesbaar is: Deur dangerouslySetInnerHTML met onbetroubare insette te gebruik, kan aanvallers kwaadwillige skripte inspuit.

Dit gebeur wanneer gebruikersinsette verkeerd hanteer word in sjablone, wat aanvallers toelaat om sjablone of uitdrukkings in te spuit en uit te voer.

Voorbeeld van kwesbare kode:

import React from "react"
import ejs from "ejs"

function RenderTemplate({ template, data }) {
const html = ejs.render(template, data)
return <div dangerouslySetInnerHTML={{ __html: html }} />
}

Waarom dit kwesbaar is: As template of data kwaadwillige inhoud bevat, kan dit lei tot die uitvoering van onbedoelde kode.

Dit is ’n kwesbaarheid wat aanvallers in staat stel om client-side paths te manipuleer om onbedoelde aksies uit te voer, soos Cross-Site Request Forgery (CSRF). Anders as server-side path traversal, wat die bediener se lêerstelsel teiken, fokus CSPT op die uitbuiting van client-side meganismes om legitieme API-versoeke na kwaadwillige endpoints om te lei.

Voorbeeld van kwesbare kode:

’n Next.js toepassing laat gebruikers toe om lêers op te laai en af te laai. Die aflaaifunksie is aan die client side geïmplementeer, waar gebruikers die lêerpad kan spesifiseer om af te laai.

// 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>
)
}

Aanvalscenario

1. Aanvaller se doelwit: Perform a CSRF attack to delete a critical file (e.g., admin/config.json) by manipulating the filePath.
2. Uitbuiting van CSPT:

• Kwaadaardige invoer: Die aanvaller stel ’n URL saam met ’n gemanipuleerde filePath soos ../deleteFile/config.json.
• Resulterende API-oproep: Die client-side kode maak ’n versoek na /api/files/../deleteFile/config.json.
• Bediener se hantering: Indien die bediener die filePath nie valideer nie, verwerk dit die versoek en kan dit sensitiewe lêers verwyder of openbaar maak.

3. Uitvoering van CSRF:

• Gemaakte skakel: Die aanvaller stuur die slagoffer ’n skakel of plaas ’n kwaadaardige script wat die aflaaiversoek met die gemanipuleerde filePath trigger.
• Uitkoms: Die slagoffer voer onbedoeld die aksie uit, wat tot ongemagtigde lêertoegang of -verwydering lei.

Waarom dit kwesbaar is

• Gebrek aan invoervalidasie: Die client-side laat arbitrêre filePath insette toe, wat path traversal moontlik maak.
• Vertroue op kliëntinsette: Die server-side API vertrou en verwerk die filePath sonder sanitisering.
• Potensiële API-aksies: Indien die API-endpoint toestandveranderende aksies uitvoer (bv. delete, modify files), kan dit via CSPT uitgebuit word.

Next.js 13+ laat jou toe om handlers vir spesifieke HTTP-metodes binne dieselfde route.js of route.ts file te definieer, wat duideliker en meer georganiseerde kode bevorder.

Voorbeeld:

// 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" },
})
}

Verduideliking:

• Meerdere Exporte: Elke HTTP-metode (GET, PUT, DELETE) het sy eie geëksporteerde funksie.
• Parameters: Die tweede argument gee toegang tot roeteparameters via params.
• Verbeterde Antwoorde: Groter beheer oor response-objekte, wat ’n presiese beheer van headers en statuskodes moontlik maak.

Next.js 13+ ondersteun gevorderde routeringsfunksies soos catch-all roetes en geneste API-roetes, wat meer dinamiese en skaalbare API-strukture toelaat.

Catch-All Roete Voorbeeld:

// 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" },
})
}

Verduideliking:

• Syntax: [...] dui ’n catch-all-segment aan en vang alle geneste paaie op.
• Gebruik: Handig vir APIs wat wisselende roete-diepte of dinamiese segmente moet hanteer.

Geneste Roetes Voorbeeld:

// 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" },
}
)
}

Verduideliking:

• Diepe nesteling: Laat hiërargiese API-strukture toe wat verhoudings tussen hulpbronne weerspieël.
• Parametertoegang: Maklik toegang tot verskeie roete-parameters via die params-objek.

API-roetes in die pages-gids (Next.js 12 en vroeër)

Voor Next.js 13 die app-gids en verbeterde routing-vaardighede bekendgestel het, is API-roetes hoofsaaklik binne die pages-gids gedefinieer. Hierdie benadering word steeds algemeen gebruik en ondersteun in Next.js 12 en vroeër weergawes.

Basiese API-roete

Lêerstruktuur:

goCopy codemy-nextjs-app/
├── pages/
│   └── api/
│       └── hello.js
├── package.json
└── ...

Implementering:

javascriptCopy code// pages/api/hello.js

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

Verduideliking:

• Ligging: API-roetes is geleë onder die pages/api/ gids.
• Uitvoer: Gebruik export default om die handler-funksie te definieer.
• Funksie-handtekening: Die handler ontvang req (HTTP request) en res (HTTP response) objekte.
• Roetering: Die lêernaam (hello.js) stem ooreen met die endpoint /api/hello.

Dinamiese API-roetes

Lêerstruktuur:

bashCopy codemy-nextjs-app/
├── pages/
│   └── api/
│       └── users/
│           └── [id].js
├── package.json
└── ...

Implementering:

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`);
}
}

Verduideliking:

• Dynamic Segments: Vierkantige hakies ([id].js) dui dinamiese roete-segmente aan.
• Accessing Parameters: Gebruik req.query.id om die dinamiese parameter te kry.
• Handling Methods: Gebruik voorwaardelike logika om verskillende HTTP-metodes (GET, PUT, DELETE, etc.) te hanteer.

Hantering van verskillende HTTP-metodes

Alhoewel die basiese API-roetevoorbeeld alle HTTP-metodes binne ’n enkele funksie hanteer, kan jy jou kode struktureer om elke metode eksplisiet te hanteer vir beter duidelikheid en onderhoudbaarheid.

Voorbeeld:

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`);
}
}

Beste praktyke:

• Skeiding van verantwoordelikhede: Skei die logika duidelik vir verskillende HTTP-metodes.
• Konsekwentheid van antwoorde: Verseker konsekwente antwoordstrukture om hantering aan kliëntkant te vergemaklik.
• Fouthantering: Hanteer nie-ondersteunde metodes en onvoorsiene foute op ’n elegante wyse.

Sekuriteitsheaders verbeter die sekuriteit van jou toepassing deur blaaiers te instrueer oor hoe om inhoud te hanteer. Hulle help om verskeie aanvalle soos Cross-Site Scripting (XSS), Clickjacking, en MIME type sniffing te mitiageer:

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

Voorbeelde:

// 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...
],
},
]
},
}

Next.js optimaliseer beelde vir prestasie, maar verkeerd gekonfigureerde instellings kan tot sekuriteitskwesbaarhede lei, byvoorbeeld deur onbetroubare bronne toe te laat om kwaadwillige inhoud in te spuit.

Slegte konfigurasievoorbeeld:

// next.config.js

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

Probleem:

• '*': Laat toe dat beelde van enige eksterne bron gelaai word, insluitend onbetroubare of kwaadwillige domeine. Aanvallers kan beelde host wat kwaadwillige payloads of inhoud bevat wat gebruikers mislei.
• Nog ’n probleem kan wees om ’n domein toe te laat waar enigiemand ’n beeld kan oplaai (soos raw.githubusercontent.com)

Hoe aanvallers dit misbruik:

Deur beelde vanaf kwaadwillige bronne in te sluit, kan aanvallers phishing-aanvalle uitvoer, misleidende inligting vertoon, of kwesbaarhede in beeld-rendering biblioteke uitbuit.

Bestuur sensitiewe inligting soos API keys en database credentials veilig sonder om dit aan die kliënt bloot te stel.

a. Blootstelling van Sensitiewe Veranderlikes

Slegte Konfigurasie Voorbeeld:

// 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
},
}

Probleem:

• SECRET_API_KEY: Sonder die NEXT_PUBLIC_ voorvoegsel stel Next.js nie veranderlikes aan die kliënt bloot nie. As dit egter per ongeluk met die voorvoegsel geplaas word (bv. NEXT_PUBLIC_SECRET_API_KEY), word dit op die kliëntkant toeganklik.

Hoe aanvallers dit misbruik:

As sensitiewe veranderlikes aan die kliënt blootgestel word, kan aanvallers dit bekom deur die kliëntkantkode of netwerkaanvrae te inspekteer, en so ongemagtigde toegang tot APIs, databasisse of ander dienste verkry.

Bestuur URL-omleidings en herskrywings binne jou toepassing en verseker dat gebruikers na die korrekte plekke geleid word sonder om open redirect kwesbaarhede te skep.

a. Open Redirect Vulnerability

Slegte konfigurasie-voorbeeld:

// next.config.js

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

Probleem:

• Dinamiese Bestemming: Laat gebruikers toe om enige URL te spesifiseer, wat open redirect attacks moontlik maak.
• Vertrou gebruikersinvoer: Omleidings na URL’s wat deur gebruikers verskaf word sonder validatie, kan lei tot phishing, malware distribution, of credential theft.

Hoe aanvallers dit misbruik:

Aanvallers kan URLs saamstel wat skynbaar vanaf jou domein afkomstig lyk, maar gebruikers na kwaadaardige werwe herlei. Byvoorbeeld:

https://yourdomain.com/redirect?url=https://malicious-site.com

Gebruikers wat die oorspronklike domein vertrou, kan onbewustelik na skadelike webwerwe navigeer.

Pas Webpack-konfigurasies aan vir jou Next.js-toepassing, wat onbedoeld sekuriteitskwesbaarhede kan inbring as dit nie versigtig hanteer word nie.

a. Blootstelling van sensitiewe modules

Slegte konfigurasievoorbeeld:

// next.config.js

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

Problem:

• Blootstelling van Gevoelige Paaie: Om gevoelig directories te alias en kliënt-side toegang toe te laat kan leak vertroulike inligting.
• Bundeling van Sekrete: As gevoelig lêers vir die kliënt saamgebundel word, word hul inhoud toeganklik deur source maps of deur ondersoek van die client-side code.

How attackers abuse it:

Aanvallers kan toegang kry tot of die toepassing se gidsstruktuur herbou, en moontlik gevoelige lêers of data vind en misbruik.