Dynamiczne trasy w NextJS

W NextJS można tworzyć dynamiczne trasy. Takie trasy zakładają, że część URL może mieć dowolną wartość. Dla przykładu weźmy adres /users/1, w którym zamiast jedynki może być dowolna liczba, technicznie odpowiadająca id użytkownika, którego chcemy wyświetlić.

W tym przypadku nie musimy tworzyć wielu folderów dla każdej możliwej liczby. Wystarczy zadeklarować tę część adresu jako dynamiczną. W tym przypadku wszystkie żądania tego rodzaju będą obsługiwane przez wspólny plik page.jsx.

Aby utworzyć dynamiczny parametr, należy nazwę odpowiedniego folderu umieścić w nawiasach kwadratowych. W naszym przypadku będzie to następująca struktura folderów:

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

Stwórzmy odpowiedni komponent:

export default function User() {
	return <p>
		user
	</p>;
}

Przy tym zadany przez nas parametr będzie przechowywany w specjalnym obiekcie params. Wyświetlmy wartość tego parametru:

export default function User({ params }) {
	return <p>
		user {params.id}
	</p>;
}

Utwórz trasę, obsługującą adresy rodzaju /city/:name, gdzie zamiast :name może być dowolny ciąg znaków.

Utwórz trasę, obsługującą adresy rodzaju /show/:country/:city, gdzie zamiast :country i :city mogą być dowolne ciągi znaków.

Utwórz trasę, obsługującą adresy rodzaju /post/:id, gdzie zamiast :id może być dowolna liczba.

Niech będzie dana następująca tablica:

let posts = [
	'post1',
	'post2',
	'post3',
	'post4',
	'post5',
];

export default function Post() {
	
}

Spraw, aby w zależności od wartości parametru id w strukturze komponentu był wyświetlany odpowiedni post.

Utwórz trasę, obsługującą adresy rodzaju /prod/:id, gdzie zamiast :id może być dowolna liczba.

Niech będzie dana następująca tablica:

let prods = [
	{
		id: 1,
		name: 'prod1',
		cost: 100,
	},
	{
		id: 2,
		name: 'prod2',
		cost: 200,
	},
	{
		id: 3,
		name: 'prod3',
		cost: 300,
	},
];

export default function Prod() {
	
}

Spraw, aby w zależności od wartości parametru id w strukturze komponentu był wyświetlany odpowiedni produkt.