[Next.js]コード剥離とルーティング関連

23677 ワード
テキストリンク
開始します.$ npx create-next-app next-tutorial --typescript

Head


pages/index.tsxの内容から、react-heartなどのheaderをheadで管理することができます.(ページごとにドキュメントのタイトルを決定したり、検索エンジンを最適化したりするのに役立ちます)
// pages/index.tsx

import type { NextPage } from 'next';
import Head from 'next/head';

const Home: NextPage = () => {
  return (
    <div>
      <Head>
        <title>타이틀 지정</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <p>hello world</p>
      </main>
    </div>
  )
}

export default Home

ルーティング処理


ルーティングを処理するためにreactに別のreact-router-domをインストールした場合、next.jsは、追加のインストールを必要とせずにpagesというディレクトリに基づいてルーティングすることができる.
今pagesディレクトリの下で検索します.tsxを生成すると、urlにページを移動できるかどうかを次の方法で確認できます.
// pages/search.tsx

import Head from "next/head";

const Search = () => {
  return (
    <div>
      <Head>
        <title>검색 페이지</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <p>Search</p>
    </div>
  );
}

export default Search;

まずファイル名を検索します.tsx大文字を使用するとurlを打つと自動的に大文字から小文字に変わり、404エラーが発生します.
https://nextjs.org/learn/basics/navigate-between-pages/pages-in-nextjs
ここからも分かるように、ファイル名は小文字で始まる、守るべき約束です.

クライアントからサイトへのナビゲート


Nettはreact-router-domが提供する機能で、reactから外部ページに移動しない限り、アプリケーション内でページを移動できます.jsは、リンクというコンポーネントを使用してページ間を移動します.
これらは、プライマリ検索にも検索にも使用できます.したがって、個別に作成できます.
// components/Navigation.tsx

import Link from "next/link";

const Navigation = () => {
  return (
   <header>
    <ul>
      <li>
        <Link href='/'>
          <a>Main</a>
        </Link>
      </li>
      <li>
        <Link href='/search'>
          <a>Search</a>
        </Link>
      </li>
    </ul>
   </header>
  );
}

export default Navigation;
Navigationコンポーネントをホームページと検索ページにロードすることで、ページ間を再ロードせずに移動できます.
// pages/search.tsx

const Search = () => {
  return (
    <div>
      <Head>
        // 생략...
      </Head>
      <Navigation />
	  // 생략...
    </div>
  );
}

コード剥離


また、ページ内のファイルは、構築中に分割されたコード剥離を自動的にサポートします.
Each file inside your pages/directory will be code split into its own JavaScript bundle during the build process.
https://nextjs.org/docs/migrating/from-react-router#code-splitting
ホームページには検索ページに関連するコードがロードされておらず、ホームページに必要な内容だけがロードされていることが確認されました.(ページを追加した後、正常に動作するにはサーバを再起動する必要があります.)

どうてきルーティング


urlは状況に応じて動的ルーティング処理をpagesディレクトリで処理することもできる.
まず、ページを移動するために作成されたnavigationコンポーネントに追加のコードを記述します.
// components/Navigation.tsx

const Navigation = () => {
  return (
    <header>
      <ul>
        // 생략...
        <li>
          <Link href="/post/first">
            <a>First Post</a>
          </Link>
        </li>
        <li>
          <Link href="/post/second">
            <a>Second Post</a>
          </Link>
        </li>
      </ul>
    </header>
  );
}
次にpagesディレクトリの下にpostというディレクトリを作成し、そのディレクトリの下に[id].tsxファイルを作成します.
import { useRouter } from "next/router";

const Post = () => {
  const router = useRouter();
  const { id } = router.query;
  
  return (
    <div>
      <p>Post: {id}</p>
    </div>
  );
}

export default Post;
これにより、/post/1、/post/abc、および/post/firstなどのパスがpages/post/[id]になります.tsxと一致するとquery objectが結果を生成します.
/post/second{ "id": "second" }クエリー文字列を使用するケースもquery objectに含まれます.
/post/abc?foo=bar{ "foo": "bar", "id": "abc" }以下は、ナビゲーションのSecond Postをクリックしたときの結果です.

では、ポストだけ出す場合はどうなるのでしょうか.

もちろん、404エラーが発生します.解決するには、/pages/postにインデックスを作成します.tsxに記入すればいいです.
非ダイナミックルーティングはダイナミックルーティングよりも優先されるためです.
// pages/post/index.tsx

const Index = () => {
    return (
      <div>
        <p>Default 페이지</p>
      </div>
    );
}

export default Index;

Reference


  • https://nextjs.org/docs/routing/introduction

  • https://stackoverflow.com/questions/66372842/next-js-dynamic-route-right-after-index
    • hadoop2.2原理:HDFSのファイル読み書きを分析する
    Swift - RxCocoa