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:

app/users/[id]/page.jsxexport 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:

app/users/[id]/page.jsxexport default function User({ params }) {
  return <p>
    user {params.id}
  </p>;
}

Задание 1

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

Задание 2

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

Задание 3

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:

page.jsxlet 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.

Задание 4

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:

page.jsxlet 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.