Next.jsチュートリアル:2.Navigate Between Pages

6352 ワード
テキストリンク
Create a New Page
pagesディレクトリにpostsというディレクトリを作成する
pages/posts/first-post.jsの作成
first-post.jsに対応するコードを記述する
export default function FirstPost() {
  return <h1>First Post</h1>;
}
http://localhost:3000/posts/first-post
せつぞく
結果

❗️👀 ここで分かる
  • Next.jsページは、ページ内の反応コンポーネント
    • である.
  • ページのファイルパスがURLパス
    • である.
    リンクコンポーネント<Link>の使用
    1. link import
    2.<a>タグ<Link>で包む
    index.js
    import Link
    import Link from "next/link";
    「≪戻る｜Back｜emdw≫」セクションでの作成
          <main>
        <h1 className="title">
          Read{""}
          <Link href="/posts/first-post">
            <a>this page!</a>
          </Link>
        </h1>
    first-post
    import Link from "next/link";

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  );

}
    結果

    クリックしてhttp://localhost:3000/に戻ります(最初の画面)
    𘥪Client Side Navigation-わかりにくい読み返す
    機械学習におけるデータセット
    ネットワークの構成