Dynaamiset reitit NextJS:ssä

NextJS:ssä voit luoda dynaamisia reittejä. Tällaiset reitit olettavat, että osa URL-osoitteesta voi olla mielivaltainen arvo. Esimerkkinä otamme osoitteen /users/1, jossa ykkösen sijasta voi olla mikä tahansa numero, teknisesti vastaten käyttäjän id:tä, jota haluamme näyttää.

Tässä tapauksessa meidän ei tarvitse luoda useita kansioita jokaiselle mahdolliselle numerolle. Riittää, että julistamme tämän osan osoitteesta dynaamiseksi. Tällöin kaikki tällaiset pyynnöt käsitellään yhteisessä tiedostossa page.jsx.

Jotta voit tehdä dynaamisen parametrin, tarvitset vastaavan kansion nimen laittaa hakasulkeisiin. Meidän tapauksessamme tämä on seuraava kansiorakenne:

/app/
- /users/
  - /[id]/

Tehdään vastaava komponentti:

export default function User() {
	return <p>
		käyttäjä
	</p>;
}

Tällöin asettamamme parametri säilytetään erityisessä objektissa params. Esitetään parametrin arvo:

export default function User({ params }) {
	return <p>
		käyttäjä {params.id}
	</p>;
}

Tee reitti, joka käsittelee osoitteita muotoa /city/:name, jossa :name:n sijasta voi olla mikä tahansa merkkijono.

Tee reitti, joka käsittelee osoitteita muotoa /show/:country/:city, jossa :country:n ja :city:n sijasta voi olla mitkä tahansa merkkijonot.

Tee reitti, joka käsittelee osoitteita muotoa /post/:id, jossa :id:n sijasta voi olla mikä tahansa numero.

Olkoon annettu seuraava taulukko:

let posts = [
	'julkaisu1',
	'julkaisu2',
	'julkaisu3',
	'julkaisu4',
	'julkaisu5',
];

export default function Post() {
	
}

Tee niin, että parametrin id arvosta riippuen komponentin renderöinnissä esitetään vastaava julkaisu.

Tee reitti, joka käsittelee osoitteita muotoa /prod/:id, jossa :id:n sijasta voi olla mikä tahansa numero.

Olkoon annettu seuraava taulukko:

let prods = [
	{
		id: 1,
		name: 'tuote1',
		cost: 100,
	},
	{
		id: 2,
		name: 'tuote2',
		cost: 200,
	},
	{
		id: 3,
		name: 'tuote3',
		cost: 300,
	},
];

export default function Prod() {
	
}

Tee niin, että parametrin id arvosta riippuen komponentin renderöinnissä esitetään vastaava tuote.