Next.js Crash Course for Beginners 2021カリキュラム注釈(4):General Layout&構文ナビゲーション

(🛑 YoutubeのAcademindにアップロードされたNextJSチュートリアルの授業原稿です.リンクをクリックしてレッスンを受講します.)

Onwards To A Bigger Project!

NextJSはページ設定のほか、データ交換など多くの機能を提供しています.
これまで議論してきたニュースプロジェクトを一旦置いて、新しいプロジェクトmeetup list app-の勉強を始めます.

Preparing Our Project Pages

まず、ページフォルダを次のように整理します.
1)starting page:すべてのコミットリストを表示するページ
2)new meetup page:新規コミットページの作成
3)meetup detailpage:コミットの詳細(コミットごとの詳細)を表示するページ

Rendering A List Of (Dummy) Meetups

フォルダ構造を見てみると、pagesフォルダとcomponentsフォルダがあります.(componentsフォルダのように、名前を任意に変更できます.)pagesとcomponentsの決定的な違いは、componentsフォルダに格納された要素がページとして自動的にロードされないことである.従来の反応方式と同様に、他の素子やページで再利用可能な素子に相当する.

前述したように、コードを記述し、構成部品フォルダに作成した構成部品をHomePageからインポートします.ここまでは既存の反応と大差ない!

Adding A Form For Adding Meetups

上記の原理に従って、meetupフォーム(ページコンポーネントではなく基本コンポーネント!)も追加されます.
ここでは,既存のreactコンポーネントとnextJSページコンポーネントを混在させる方法について学習した.
しかし、この方式は機能喪失を招く.ページ間をどのようにナビゲートするかはまだ分からないし、ページ間の共通レイアウトもありません.各ページは幅全体を占めており、ヘッダーはありません.

The "_app.js" File & Wrapper Components

汎用レイアウトを適用するために、このコースで提供される起動項目にはレイアウトフォルダが用意されています.HomePageにヘッダーを追加したい場合は、次のコードを作成してみましょう.

function HomePage() {
  return (
    <Layout>
      <MeetUpList meetups={DUMMY_MEETUPS}></MeetUpList>
    </Layout>
  );
}

これはホームページに適用されますが、他のページに移動するとレイアウトは消えます.
もちろん、他のページでも同じ仕事ができますが、もっと良い方法があります.


このとき必要なのは_app.jsファイルです!_app.jsはちょっと特別なファイルです.このファイルはNestJSのrootコンポーネントとして理解できます._app.jsは、復号のためにフロプスを受信している.

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Disstructure処理中のデュップを見てみましょう.デュプロップはmyApp素子に自動的に伝達されるプロップである.PagePropsは、私たちのページが受信するアイテムを意味します.また、Componentは、ページ移動に伴ってレンダリングされる要素である.ここで考えられるのは、_app.jsをレイアウトで囲むことです.

すべてのページにレイアウトを適用することなく、すべてのページに同じレイアウトを表示できるようになりました.
大量のページが存在しても、コードの作成は難しくなく、メンテナンスが容易です.

Programmatic Navigation

データのページングとデータをバックエンドに送信する前に、詳細ページについて説明します.
まずプログラミングでナビゲートします.

function MeetupItem(props) {
  const router = useRouter();

  function showDetailsHandler() {
    router.push("/" + props.id);
  }

  return (
    <li className={classes.item}>
      <Card>
        <div className={classes.image}>
          <img src={props.image} alt={props.title} />
        </div>
        <div className={classes.content}>
          <h3>{props.title}</h3>
          <address>{props.address}</address>
        </div>
        <div className={classes.actions}>
          <button onClick={showDetailsHandler}>Show Details</button>
        </div>
      </Card>
    </li>
  );
}

もちろん、従来のLink素子も利用可能である.でももっと良い方法があります!
userouter hook対応するhookを使用してルータ、routerを宣言します.pushメソッドを使用すると、転送パラメータに対応するページにユーザーを移動できます.

Adding Custom Components & Styling With CSS

最後に、プロジェクトがバックエンドサーバに接続されていないため、詳細ページはハードコーディングで完了します.

前に示したように、コードを書き終わったら、画像の右側のように出力された画面が表示されます.
ここで議論する部分は,NextJSでスタイルを適用する方法である.
もちろん、pages>[meetupId]にcssファイルを直接作成することもできます.
しかし、私たちの目標はできるだけページフォルダを簡素化することです.まず、MeetupDetails内部で作成されたコードをページコンポーネントからドラッグできます.

import { Fragment } from "react";
import MeetupDetail from "../../components/meetups/MeetupDetail";

function MeetupDetails() {
  return (
    <MeetupDetail
      image="https://upload.wikimedia.org/wikipedia/commons/d/d3/Stadtbild_M%C3%BCnchen.jpg"
      title="A First Meetup"
      address="Some Street 5, Some City"
      description="This is a First Meetup"
    />
  );
}

export default MeetupDetails;

上記の内容を使用して、構成部品フォルダに個別にファイルを作成し、ファイルのみを解放します.
次に、構成部品フォルダにMeetupDetail.module.cssをそれぞれ記入します.
NextJSでmodule.cssの特殊な点は、cssクラスを参照できることです.
ファイルを作成し、特定のjsファイルからインポートすると、コンポーネントにマッピングされます.

import classes from "./MeetupDetail.module.css";

function MeetupDetail(props) {
  return (
    <section className={classes.detail}>
      <img src={props.image} alt={props.title} />
      <h1>{props.title}</h1>
      <address>{props.address}</address>
      <p>{props.description}</p>
    </section>
  );
}

export default MeetupDetail;

CSSモジュールを使用する場合は、上図のように適用してください.