Next.js - Pages

W Next.js możemy tworzyć strony i nawigować między nimi za pomocą funkcji routingu systemu plików. UżyjemyLink do nawigacji między stronami po stronie klienta.

W Next.js strona jest komponentem React i jest eksportowana z katalogu pages. Każda strona jest powiązana z trasą na podstawie nazwy pliku. Na przykład

• pages/index.js jest połączony z trasą „/”.

• pages/posts/first.js jest powiązany z trasą „/ posts / first” i tak dalej.

Zaktualizujmy projekt nextjs utworzony w rozdziale Konfiguracja środowiska .

Utwórz katalog postów i first.js w nim z następującą zawartością.

export default function FirstPost() {
   return <h1>My First Post</h1>
}

Dodaj obsługę linków, aby wrócić do strony głównej. Zaktualizuj first.js w następujący sposób -

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
      </>	  
   )
}

Dodaj obsługę linków do strony głównej, aby przejść do pierwszej strony. Zaktualizuj plik index.js w następujący sposób -

import Link from 'next/link'

function HomePage() {
   return (
      <>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
      </>	    
   )
}

export default HomePage

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

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

Sprawdź wyjście

Otwórz localhost: 3000 w przeglądarce, a zobaczysz następujące dane wyjściowe.

Kliknij First Link, a zobaczysz następujące dane wyjściowe.