Next.js - Routing

Next.js verwendet einen dateisystembasierten Router. Wann immer wir eine Seite hinzufügenpagesVerzeichnis ist es automatisch über URL verfügbar. Es folgen die Regeln dieses Routers.

Index Routes- Eine in einem Ordner vorhandene Datei index.js wird dem Stammverzeichnis des Verzeichnisses zugeordnet. Zum Beispiel -
- pages / index.js ist '/' zugeordnet.
- pages / posts / index.js ist '/ posts' zugeordnet.
Nested Routes- Jede verschachtelte Ordnerstruktur im Seitenverzeichnis, da die Router-URL automatisch. Zum Beispiel -
- pages / settings / dashboard / about.js ist '/ settings / dashboard / about' zugeordnet.
- pages / posts / first.js ist '/ posts / first' zugeordnet.
Dynamic Routes- Wir können auch benannte Parameter verwenden, um die URL abzugleichen. Verwenden Sie dafür Klammern. Zum Beispiel -
- pages / posts / [id] .js ist '/ posts /: id' zugeordnet, wo wir URLs wie '/ posts / 1' verwenden können.
- pages / [user] /settings.js ist '/ posts /: user / settings' zugeordnet, wo wir URLs wie '/ abc / settings' verwenden können.
- pages / posts / [... all] .js ist '/ posts / *' zugeordnet, wo wir eine beliebige URL wie '/ posts / 2020 / jun /' verwenden können.

Seitenverknüpfung

Next.JS ermöglicht das Verknüpfen von Seiten auf der Clientseite mithilfe der Link-React-Komponente. Es hat folgende Eigenschaften -

href- Name der Seite im Seitenverzeichnis. Zum Beispiel/posts/first Dies bezieht sich auf first.js im Verzeichnis pages / posts.

Lassen Sie uns ein Beispiel erstellen, um dasselbe zu demonstrieren.

In diesem Beispiel aktualisieren wir die Seiten index.js und first.js, um einen Servertreffer zum Abrufen von Daten zu erzielen.

Lassen Sie uns das nextjs-Projekt aktualisieren, das im Kapitel Global CSS Support verwendet wird .

Aktualisieren Sie die Datei index.js im Seitenverzeichnis wie folgt.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first">> <a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 in einem Browser und Sie sehen die folgende Ausgabe.

Klicken Sie auf den Link Erster Beitrag.