Rotas Dinâmicas no NextJS

No NextJS, você pode criar rotas dinâmicas. Tais rotas pressupõem que parte do URL pode ter um valor arbitrário. Por exemplo, tomemos o endereço /users/1, onde em vez de um poderia ser qualquer número, tecnicamente correspondente ao id do usuário que queremos exibir.

Neste caso, não precisamos criar múltiplas pastas para cada número possível. Basta declarar essa parte do endereço como dinâmica. Neste caso, todas as solicitações desse tipo serão tratadas por um arquivo comum page.jsx.

Para criar um parâmetro dinâmico, é preciso colocar o nome da pasta correspondente entre colchetes. No nosso caso, será a seguinte estrutura de pastas:

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

Vamos criar o componente correspondente:

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

O parâmetro que definimos será armazenado em um objeto especial params. Vamos exibir o valor desse parâmetro:

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

Crie uma rota que lide com endereços do tipo /city/:name, onde em vez de :name pode ser qualquer string.

Crie uma rota que lide com endereços do tipo /show/:country/:city, onde em vez de :country e :city podem ser quaisquer strings.

Crie uma rota que lide com endereços do tipo /post/:id, onde em vez de :id pode ser qualquer número.

Suponha o seguinte array:

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

export default function Post() {
	
}

Faça com que, dependendo do valor do parâmetro id, a renderização do componente exiba o post correspondente.

Crie uma rota que lide com endereços do tipo /prod/:id, onde em vez de :id pode ser qualquer número.

Suponha o seguinte array:

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

export default function Prod() {
	
}

Faça com que, dependendo do valor do parâmetro id, a renderização do componente exiba o produto correspondente.