Next.js App Router

[adeonir]

O Next.js possui um novo sistema de roteamento chamado App Router, que foi introduzido na versão 12. Este novo sistema de roteamento é baseado em rotas declarativas e oferece uma maneira mais intuitiva de definir e gerenciar as rotas em nossas aplicações Next.js.

Para começar a usar o App Router, precisamos importar o componente useRouter do pacote next/router e usá-lo em nossa página ou componente Next.js. O useRouter nos fornece acesso ao objeto router, que contém informações sobre a rota atual.

Aqui está um exemplo de como podemos usar o App Router em uma aplicação Next.js:

// pages/index.js
'use client'
import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  const handleClick = () => {
    router.push('/about');
  };

  return (
    <div>
      <h1>Welcome to the Next.js App!</h1>
      <button onClick={handleClick}>Go to About Page</button>
    </div>
  );
}

Neste exemplo, importamos a função useRouter do pacote next/router e a chamamos dentro do componente HomePage. Em seguida, usamos o objeto router retornado para acessar a função push, que nos permite navegar para a rota /about quando o botão é clicado.

O App Router também nos permite acessar informações sobre a rota atual, como query parameters e informações dinâmicas. Podemos usar o objeto router.query para acessar os parâmetros da URL.

Aqui está um exemplo de como podemos acessar os query parameters usando o App Router:

// pages/post.js
'use client'
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Post ID: {id}</h1>;
}

Neste exemplo, importamos a função useRouter do pacote next/router e a chamamos dentro do componente PostPage. Em seguida, usamos o objeto router.query para acessar o parâmetro id da URL, que será renderizado no título da página.

O novo App Router do Next.js simplifica o gerenciamento de rotas em nossas aplicações e nos fornece uma maneira mais intuitiva de navegar entre as páginas. Ele oferece recursos poderosos, como rotas declarativas e acesso fácil a informações da rota atual. Com o App Router, podemos criar experiências de navegação ricas e responsivas em nossas aplicações Next.js.

[adeonir]

Muito bom o post! O App Router do Next.js parece ser uma ótima adição ao framework. Agora não preciso mais me preocupar em criar manualmente as rotas da minha aplicação.

[adeonir]

Achei interessante a forma como o App Router permite definir rotas declarativas. Isso torna o código mais limpo e fácil de entender.

[adeonir]

Adorei o fato de que o App Router também suporta rotas dinâmicas. Isso vai facilitar muito o desenvolvimento de aplicações que precisam lidar com diferentes parâmetros de rota.