Next.js-ページ
Next.jsでは、ファイルシステムルーティング機能を使用してページを作成し、ページ間を移動できます。使用しますLink ページ間でクライアント側のナビゲーションを行うコンポーネント。
Next.jsでは、ページはReactコンポーネントであり、pagesディレクトリからエクスポートされます。各ページは、ファイル名に基づいてルートに関連付けられています。例えば
pages/index.js '/'ルートにリンクされています。
pages/posts/first.js '/ posts / first'ルートなどにリンクされています。
環境設定の章で作成したnextjsプロジェクトを更新しましょう。
以下の内容でpostディレクトリとfirst.jsを作成します。
export default function FirstPost() {
return <h1>My First Post</h1>
}
リンクサポートを追加して、ホームページに戻ります。first.jsを次のように更新します-
import Link from 'next/link'
export default function FirstPost() {
return (
<>
<h1>My First Post</h1>
<h2>
<Link href="/">
<a>Home</a>
</Link>
</h2>
</>
)
}
リンクサポートをホームページに追加して、最初のページに移動します。index.jsを次のように更新します-
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
Next.jsサーバーを起動します
次のコマンドを実行してサーバーを起動します-。
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
出力を確認する
ブラウザでlocalhost:3000を開くと、次の出力が表示されます。
First Linkをクリックすると、次の出力が表示されます。