Next.js - Routing

Next.js utilizza un router basato su file system. Ogni volta che aggiungiamo una pagina apagesdirectory, è automaticamente disponibile tramite url. Di seguito sono riportate le regole di questo router.

  • Index Routes- Un file index.js presente in una cartella viene mappato alla radice della directory. Ad esempio:

    • pages / index.js viene mappato a "/".

    • pages / posts / index.js viene mappato a "/ posts".

  • Nested Routes- Qualsiasi struttura di cartelle nidificata nella directory delle pagine perché l'URL del router automaticamente. Ad esempio:

    • pages / settings / dashboard / about.js si associa a "/ settings / dashboard / about".

    • pages / posts / first.js viene mappato a "/ posts / first".

  • Dynamic Routes- Possiamo usare anche il parametro denominato per abbinare l'URL. Usa le parentesi per lo stesso. Ad esempio:

    • pages / posts / [id] .js viene mappato a "/ posts /: id" dove possiamo usare URL come "/ posts / 1".

    • pages / [user] /settings.js mappa a "/ posts /: user / settings" dove possiamo usare URL come "/ abc / settings".

    • pages / posts / [... all] .js viene mappato a '/ posts / *' dove possiamo usare qualsiasi URL come '/ posts / 2020 / jun /'.

Collegamento alla pagina

Next.JS consente di collegare pagine lato client utilizzando il componente Link React. Ha le seguenti proprietà:

  • href- nome della pagina nella directory delle pagine. Per esempio/posts/first che si riferisce a first.js presente nella directory pages / posts.

Creiamo un esempio per dimostrare lo stesso.

In questo esempio, aggiorneremo index.js e first.js pagina per fare un colpo sul server per ottenere dati.

Aggiorniamo il progetto nextjs utilizzato nel capitolo Global CSS Support .

Aggiorna il file index.js nella directory delle pagine come segue.

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

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Verifica output

Apri localhost: 3000 in un browser e vedrai il seguente output.

Fare clic sul collegamento Primo post.