次の静的レンダリングでデータを取得する方法.js

10749 ワード
webdev tutorial nextjs テキストリンク
私の最初のポストへの歓迎方法?シリーズこの記事では、次の取得にステップバイステップのチュートリアルを示すつもりです.あなたのフェッチされた内容をAstatically generated ページ.これを行うには、後のセクションでカバーされるgetstaticprops ()関数を使用します.
チュートリアルの最後に、ページが次のようになります.

完了したプロジェクトにアクセスできますhere.
必要条件
  • WPGraphqlプラグインを使用したWordPressインスタンス.
    • これらの例ではheadless CMS コンテンツを管理するコンテンツ管理システムWPGraphQL データを取得するAPI.あなたがゼロからWordPress CMSを構成する方法について学ぶことに興味があるならば、私はあなたがロブKendalのものを次のヘッドレスCMSとして構成するのをチェックアウトすることを提案します.JS記事.この運動のために、あなたの選択の任意のヘッドレスCMSからコンテンツを取得するには無料です.
    ステップ1 :次の作成.JSプロジェクト
    我々は、使用して新しいプロジェクトを作成することから始めましょうproject create tool 次は.js端末を開き、次のコマンドを実行します.
    npx create-next-app nextjs-blog
    次に、このコマンドを実行します.
    cd nextjs-blog
    cd “変更ディレクトリ”のため、私たちは単に私たちが作成したプロジェクトフォルダに現在のディレクトリを変更しています.
    この手順は、VSコードユーザーのオプションです.以下のコマンドを実行すると、プロジェクトフォルダが自動的にVSコードで開きます.
    code .
    開発サーバーでプロジェクトを実行するには、次のコマンドを実行します.
    npm run dev
    今すぐあなたのページはポート3000で実行されます.以下のようになります.

    ステップ2 :ファイルを削除する
    次のようなコードエディターでプロジェクトを開きます.
  • /ページ/API
  • /ページ
    • あるいは、VSコードの統合端末はファイル操作を管理するのにとても便利です.VSコードに移動するView > Terminal あなたの端末を開くメニューコマンド.プロジェクトのルートで直接起動する必要はありません.次に、このコマンドを入力します.
    rm -r pages/api
    今のフォルダ構造は次のようになります.

    ステップ3 :ファイルを追加する
  • 追加/lib プロジェクトのルートのフォルダ.
  • 追加/lib/api.js ファイル.
  • 追加/.env.local プロジェクトのルートでファイルします.
    • ステップ4 :ローカル環境の保存
    私たちは/.env.local アプリケーション環境定数を管理するファイルです.これらの定数は一般にURL、APIエンドポイント、APIキーから成ります.この場合、ローカル環境ファイルにURLを保存します.イン/.env.local , あなたのWordPressインスタンスのユニークなドメイン名をGraphSQL End Pointと入力します.
    WP_API_URL=http://www.your-custom-website.com/graphql
    重要な注意
    変更後に開発サーバーを再起動してください/.env.local ファイル.
    ステップ5 :データを取得する
    私たちは、WPNAME APIRANT URL変数をカバーしたので、データを取得するための関数を書き始めることができます.移動する/lib/api.js この行を追加します.
    const API_URL = process.env.WP_API_URL;

async function fetchAPI(query, { variables } = {}) {
  const headers = { 'Content-Type': 'application/json' };

  const res = await fetch(API_URL, {
    method: 'POST',
    headers,
    body: JSON.stringify({ query, variables }),
  });

  const json = await res.json();
  if (json.errors) {
    console.log(json.errors);
    console.log('error details', query, variables);
    throw new Error('Failed to fetch API');
  }
  return json.data;
}
    この関数を使ってブログの内容をGraphSQLクエリパラメータで取得します.この関数は、異なるフェッチリクエストを通じて利用できる再利用可能な構造体として考慮することができます.
    次に、この関数を追加することで、Graphqlにコンテンツを取得するように頼むべきです.
    export async function getRecentPosts() {
  const data = await fetchAPI(`query getRecentPosts {
  posts(where: {orderby: {field: DATE, order: DESC}}, first: 6) {
    edges {
      node {
        id
        title
        slug
        featuredImage {
          node {
            altText
            mediaItemUrl
          }
        }
      }
    }
  }
}
`);

  return data?.posts;
}
    ステップ6 :インデックスファイルの変更
    今、我々はいくつかの変更を実行しますpages/index.js , どのエントリページですか.すべてを取り除く<main></main> 以下のコードをペーストする前に<footer></footer> .
            <section>
          <div className={styles.articlesContainer}>
            <h1 className={styles.articleTitle}>latest articles</h1>
            <div className={styles.articleGrid}>
              {edges.map(({ node }) => (
                <div className={styles.article} key={node.id}>
                  <img
                    src={node.featuredImage.node?.mediaItemUrl}
                    alt={node.featuredImage.node?.altText}
                    className={styles.articleThumb}
                  />
                  <h2 className={styles.articleContent}>{node.title}</h2>
                </div>
              ))}
            </div>
          </div>
        </section>
    私たちはページの上部にフェッチ機能をインポートします.
    import { getRecentPosts } from '../lib/api';
    このパラメータをHome 機能部品.{ recentPosts: { edges } }このようにHome コンポーネントは現在のようになります.パラメータは次のセクションでカバーされます.
    import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { getRecentPosts } from '../lib/api';

export default function Home({ recentPosts: { edges } }) {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <section>
          <div className={styles.articlesContainer}>
            <h1 className={styles.articleTitle}>latest articles</h1>
            <div className={styles.articleGrid}>
              {edges.map(({ node }) => (
                <div className={styles.article} key={node.id}>
                  <img
                    src={node.featuredImage.node?.mediaItemUrl}
                    alt={node.featuredImage.node?.altText}
                    className={styles.articleThumb}
                  />
                  <h2 className={styles.articleContent}>{node.title}</h2>
                </div>
              ))}
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}
    今は、次を追加する時間です.下のJS機能/pages/index.js :
    export async function getStaticProps() {
  const recentPosts = await getRecentPosts();
  return {
    props: {
      recentPosts,
    },
  };
}
    getstaticProps ()関数はどのような役割を果たしますか?
    次.JSは1つの非常に重要な概念を持っています:プレレンダリング.
    つまり、クライアント側でJavaScriptを実行して、次のようにHTMLを生成する代わりに、次のようにします.JSは事前にHTMLを生成し、生成された各ページをクライアント側に送信します.すべてのページは、ブラウザで読み込まれた後、ページを対話的にするために実行されるJavaScriptコードに関連付けられています.これは水和と呼ばれるプロセスです.あなたはどのように動作するかを確認する簡単な実験を行うことができます:あなたのブラウザでJavaScriptをオフにし、次を実行します.JSプロジェクト、魔法を参照してください.HTMLはまだあなたのブラウザでレンダリングされますが、JavaScriptがオンになるまでは対話的ではありません.
    静的生成は、ビルド時にHTMLを生成するプリレンダリングの方法の一つです.GetStaticProps ()関数を使用して、データ依存関係のある静的ページを生成します.私たちは、次に尋ねました.jsはasyngetgetstaticprops ()関数でデータを取得します.では、次に.jsは、生成されたデータの小道具をホームコンポーネントのパラメータに渡す静的に生成されたHTMLを生成し、クライアント側に送信しました.それだ!次.jsはHTMLがレンダリングされる前にデータが取り出されることを確認します.

    画像は次の公式から取られます.JSウェブサイト
    重要な注意
    以下のファイルにgetstaticprops ()関数を使用してください/pages フォルダは、ページ内でのみ動作します.
    最後に/pages/index.js ページは次のようになります.
    import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { getRecentPosts } from '../lib/api';

export default function Home({ recentPosts: { edges } }) {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <section>
          <div className={styles.articlesContainer}>
            <h1 className={styles.articleTitle}>latest articles</h1>
            <div className={styles.articleGrid}>
              {edges.map(({ node }) => (
                <div className={styles.article} key={node.id}>
                  <img
                    src={node.featuredImage.node?.mediaItemUrl}
                    alt={node.featuredImage.node?.altText}
                    className={styles.articleThumb}
                  />
                  <h2 className={styles.articleContent}>{node.title}</h2>
                </div>
              ))}
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}

export async function getStaticProps() {
  const recentPosts = await getRecentPosts();
  return {
    props: {
      recentPosts,
    },
  };
}
    ステップ7 :スタイルファイルの変更
    オープン/styles/globals.css , すべてのコンテンツを削除し、ペーストします.
    *,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%; /* 1 rem = 10px; 10px/16px = 62.5% */
}

body {
  font-size: 2.5rem;
  box-sizing: border-box;
  line-height: 1.5;
}
    次に、/styles/Home.module.css , すべてのコンテンツを削除し、ペーストします.
    .articleTitle {
  font-size: 3rem;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.12em;
}

.articleContent {
  font-size: 2.5rem;
  padding: 0 6.5rem;
  text-align: center;
  font-weight: 400;
}

.articlesContainer {
    padding: 6.5rem 4rem;
}

.articleGrid {
    margin-top: 6.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 6.5rem;
    column-gap: 3rem;
}

.articleThumb {
    width: 100%;
    height: 28rem;
    margin-bottom: 3rem;
}
    そして完了!外部データ依存関係を持つ静的ページを生成しました.
    この記事を参考にしてください.お読みありがとうございます.
    redisキャッシュオブジェクト、リスト
    Opennyxlの基本的な使い方