Next.js este un cadru React care este livrat cu toate caracteristicile de care aveți nevoie pentru producție. Acesta permite rutare în aplicația dvs. utilizând rutare bazată pe sistemul de fișiere.

În acest ghid, vă voi arăta cum funcționează rutare în Next.js.

  • Cum funcționează rutare în Next.js
  • Conectarea între pagini
  • Trecerea parametrilor rutei
  • Trasee dinamice
  • Trasee imbricate dinamice

Cum funcționează rutare în Next.js

Next.js folosește sistemul de fișiere pentru a activa rutare în aplicație. În continuare tratează automat fiecare fișier cu extensiile .js, .jsx, .ts, sau .tsx sub pages director ca o rută.

O pagină din Next.js este o componentă React care are o rută bazată pe numele fișierului său.

Luați în considerare această structură de dosare ca exemplu:

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

Aici avem patru pagini:

În mod implicit, Next.js pre-redă fiecare pagină pentru a face aplicația rapidă și ușor de utilizat. Se folosește de Link component furnizat de următor / link pentru a permite tranzițiile între rute.

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>
  )
}

Aici avem două rute:

  • Primul link duce la pagină http://localhost:3000/contact
  • Al doilea link duce la pagină http://localhost:3000/my-folder/about

Link componenta poate primi mai multe proprietăți, dar numai href atributul este obligatoriu. Aici, folosim un <a></a> etichetați ca o componentă secundară pentru a lega paginile. Dar, alternativ, puteți utiliza orice element care acceptă onClick eveniment pe Link componentă.

Cum să treceți parametrii rutei

Next.js vă permite să treceți parametrii rutei și apoi să recuperați datele folosind useRouter cârlig sau getInitialProps. Vă oferă acces la obiectul router care conține parametrii.

  • index.js
import Link from "next/link"

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

După cum puteți vedea aici, în loc să furnizați un șir către href atribut, trecem într-un obiect care conține un pathname proprietate. Acesta este traseul, împreună cu un element de interogare care deține datele.

  • about.js
import { useRouter } from "next/router"

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

Aici, importăm useRouter cârlig pentru a obține datele transmise. Apoi, le scoatem din query obiect folosind destructurare.

Dacă utilizați redarea de pe server, trebuie să utilizați getInitialProps pentru a obține datele.

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

AboutPage.getInitialProps = ({ query: { id } }) => {
  return { id }
}

Trasee dinamice

Next.js vă permite să definiți rute dinamice în aplicația dvs. utilizând parantezele ([param]). În loc să setați un nume static pe paginile dvs., puteți utiliza unul dinamic.

Să folosim această structură de foldere ca exemplu:

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

Next.js va primi parametrii rutei și apoi îl va folosi ca nume pentru rută.

  • index.js
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>
  )
}

Aici, trebuie să definim valoarea pe as atribut deoarece calea este dinamică. Numele traseului va fi orice ați setat pe as recuzită.

  • [slug].js
import { useRouter } from "next/router"

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

Puteți obține și parametrii rutei cu useRouter cârlig de client sau getInitialProps pe server.

  • fisierul meu/[id].js
export default function MyDynamicPage({ example }) {
  return <div>My example is {example}</div>
}

MyDynamicPage.getInitialProps = ({ query: { example } }) => {
  return { example }
}

Aici, folosim getInitialProps pentru a trece traseul dinamic în.

Trasee imbricate dinamice

Cu Next.js, puteți, de asemenea, să cuibăriți traseele dinamice cu parantezele ([param]).

Să luăm în considerare această structură de fișiere:

├── pages
|  ├── index.js
|  └── [dynamic]
|     └── [id].js
  • index.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>
  )
}

După cum puteți vedea aici, stabilim valorile dinamice pe as atribut așa cum am făcut în exemplul anterior. Dar de data aceasta, trebuie să definim numele folderului și fișierul acestuia.

import { useRouter } from "next/router"

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

Aici, scoatem parametrii de rută din obiectul de interogare cu useRouter cârlig.

Asta e! Mulțumesc pentru lectură.

Dacă sunteți interesat să aflați Next.js într-un mod cuprinzător, vă recomand cu tărie acest lucru curs de bestseller.

Puteți găsi alt conținut excelent ca acesta pe blogul meu sau urmează-mă pe Twitter pentru a fi notificat.

Fotografie de Javier Allegue Barros pe Unsplash