├── pages|  ├── index.js|  ├── contact.js|  └── my-folder|     ├── about.js|     └── index.js

Aqui, temos quatro páginas:

Por padrão, Next.js pré-renderiza todas as páginas para tornar seu aplicativo rápido e fácil de usar. Usa o Link componente fornecido por próximo / link para habilitar as transições entre as rotas.

import Link from "next/link"export default function IndexPage() {  return (    <div>      <Link href="https://www.freecodecamp.org/contact">        <a>My second page</a>      </Link>      <Link href="http://www.freecodecamp.org/my-folder/about">        <a>My third page</a>      </Link>    </div>  )}

Aqui, temos duas rotas:

  • O primeiro link leva à página http://localhost:3000/contact
  • O segundo link leva à página http://localhost:3000/my-folder/about

o Link componente pode receber várias propriedades, mas apenas o href atributo é obrigatório. Aqui, usamos um <a></a> tag como um componente filho para vincular páginas. Mas, alternativamente, você pode usar qualquer elemento que suporte o onClick evento no Link componente.

Como passar parâmetros de rota

Next.js permite que você passe parâmetros de rota e, em seguida, recupere os dados usando o useRouter gancho ou getInitialProps. Ele fornece acesso ao objeto roteador que contém os parâmetros.

import Link from "next/link"export default function IndexPage() {  return (    <Link      href={{        pathname: "/about",        query: { id: "test" },      }}    >      <a>About page</a>    </Link>  )}

Como você pode ver aqui, em vez de fornecer uma string para o href atributo, passamos um objeto que contém um pathname propriedade. Esta é a rota, junto com um elemento de consulta que contém os dados.

import { useRouter } from "next/router"export default function AboutPage() {  const router = useRouter()  const {    query: { id },  } = router  return <div>About us: {id}</div>}

Aqui, importamos o useRouter gancho para que os dados sejam transmitidos. Em seguida, extraímos do query objeto usando desestruturação.

Se você estiver usando renderização do lado do servidor, você deve usar getInitialProps para obter os dados.

export default function AboutPage({ id }) {  return <div>About us: {id}</div>}AboutPage.getInitialProps = ({ query: { id } }) => {  return { id }}

Rotas dinâmicas

Next.js permite que você defina rotas dinâmicas em seu aplicativo usando os colchetes ([param]) Em vez de definir um nome estático em suas páginas, você pode usar um dinâmico.

Vamos usar esta estrutura de pastas como exemplo:

├── pages|  ├── index.js|  ├── [slug].js|  └── my-folder|     ├── [id].js|     └── index.js

Next.js obterá os parâmetros de rota passados ​​e os usará como um nome para a rota.

export default function IndexPage() {  return (    <ul>      <li>        <Link href="https://www.freecodecamp.org/">          <a>Home</a>        </Link>      </li>      <li>        <Link href="/[slug]" as="/my-slug">          <a>First Route</a>        </Link>      </li>      <li>        <Link href="http://www.freecodecamp.org/my-folder/[id]" as="/my-folder/my-id">          <a>Second Route</a>        </Link>      </li>    </ul>  )}

Aqui, temos que definir o valor no as atributo porque o caminho é dinâmico. O nome da rota será o que você definiu no as suporte.

import { useRouter } from "next/router"export default function DynamicPage() {  const router = useRouter()  const {    query: { id },  } = router  return <div>The dynamic route is {id}</div>}

Você pode obter os parâmetros da rota também com o useRouter enganchar no cliente ou getInitialProps no servidor.

export default function MyDynamicPage({ example }) {  return <div>My example is {example}</div>}MyDynamicPage.getInitialProps = ({ query: { example } }) => {  return { example }}

Aqui, usamos getInitialProps para passar a rota dinâmica.

Rotas aninhadas dinâmicas

Com Next.js, você também pode aninhar rotas dinâmicas com os colchetes ([param])

Vamos considerar esta estrutura de arquivo:

├── pages|  ├── index.js|  └── [dynamic]|     └── [id].js

export default function IndexPage() {  return (    <ul>      <li>        <Link href="https://www.freecodecamp.org/">          <a>Home</a>        </Link>      </li>      <li>        <Link href="/[dynamic]/[id]" as="/my-folder/my-id">          <a>Dynamic nested Route</a>        </Link>      </li>    </ul>  )}

Como você pode ver aqui, definimos os valores dinâmicos no as atributo como fizemos no exemplo anterior. Mas desta vez, temos que definir o nome da pasta e seu arquivo.

import { useRouter } from "next/router"export default function DynamicPage() {  const router = useRouter()  const {    query: { dynamic, id },  } = router  return (    <div>      Data: {dynamic} - {id}    </div>  )}

Aqui, retiramos os parâmetros de rota do objeto de consulta com o useRouter gancho.

É isso aí! Obrigado pela leitura.

Se você estiver interessado em aprender Next.js de uma forma abrangente, recomendo fortemente este curso bestseller.

Você pode encontrar outro ótimo conteúdo como este em meu blog ou me segue no Twitter para ser notificado.

foto por Javier Allegue Barros em Unsplash