Roteamento Dinâmico em Next.js: Como usar parâmetros dinâmicos nas rotas e pré-carregar páginas

Introdução

O roteamento dinâmico é um recurso extremamente poderoso em Next.js que permite criar páginas dinâmicas com base em dados. Este artigo oferece um guia abrangente sobre como usar parâmetros dinâmicos em suas rotas e como pré-carregar páginas para otimizar a experiência do usuário.

Sumário

1. O que é roteamento dinâmico?
2. Como criar rotas dinâmicas em Next.js
3. Usando parâmetros de consulta
4. Pré-carregamento de páginas
5. Exemplos práticos
6. Conclusão

O que é roteamento dinâmico?

O roteamento dinâmico permite criar páginas que são renderizadas com base em informações dinâmicas, como IDs de banco de dados, nomes de usuários ou outros parâmetros.

Como criar rotas dinâmicas em Next.js

Para criar uma rota dinâmica em Next.js, você deve nomear seu arquivo de página com colchetes. Por exemplo, para criar uma rota dinâmica para posts, você nomearia seu arquivo como posts/[id].js.

// páginas/posts/[id].js
function Post({ post }) {
return <h1>{post.title}</h1>;
}

Usando parâmetros de consulta

Você pode acessar os parâmetros de consulta usando o hook useRouter da Next.js.

import { useRouter } from 'next/router';

// Seu componente
const { query } = useRouter();

Pré-carregamento de páginas

O Next.js também permite pré-carregar páginas usando funções como getStaticPaths e getServerSideProps.

// Usando getStaticPaths para pré-carregar páginas
export async function getStaticPaths() {
const paths = getPathsFromAPI(); // Sua lógica aqui
return { paths, fallback: false };
}

Exemplos práticos

Página de perfil de usuário

// páginas/user/[username].js
function UserProfile({ user }) {
return <h1>Bem-vindo, {user.username}!</h1>;
}

Página de categoria de produto

// páginas/category/[id].js
function CategoryPage({ products }) {
return (
<div> {products.map((product) => ( <ProductCard key={product.id} product={product} /> ))} </div>
);
}

Conclusão

O roteamento dinâmico em Next.js é simples, mas incrivelmente poderoso, oferecendo flexibilidade para construir uma ampla variedade de aplicações web. Com a adição de recursos de pré-carregamento, você pode oferecer uma experiência de usuário ainda mais fluida.

Com isso, você deve estar bem equipado para começar a usar rotas dinâmicas em seus próprios projetos Next.js.