次を使用して私の最初のフェッチ要求を作った.js

久しぶりにブログ記事を書いていて、今週学んだことを共有したかった.最近発見した nextjs てんとう虫のポッドキャストから、それほど秘密にされていないので、それ以来、これの証拠は以下の通りです

ブリタニー.
@ Sincerelybrittt

すごい!ちょうど次の聞いた.JSエピソードと私は、私がギャツビーでしていて、次でやり直すすべてを止めたいです.js😂
午後20時40分- 2021年1月25日
ブログ一覧にもどる nextjs 人気が出てきましたが podcast episode または以下のブログの一部を確認します.
Why You Should Learn Next.js as a React Developer - FreeCodeCamp
Next.js for React: Why You Should Give It a Try Right Now By Louis Petrik
What’s The Difference Between NextJS and Create-React-App? By Malcolm Laing
私はほぼステップバイステップガイドで行われます nextjs そして最近では Pre-rendering and Data Fetching ガイドのセクション.
The Pre-rendering and Data Fetching ガイドは非常に有用であり、私はガイドで提供されるファイルシステムを使用してデータを取得することができた.しかし、もっと練習をして、dev . toにフェッチリクエストをすることにしました.

簡単な取得要求を取得します。js

まず最初に、dev . toはまだベータ版にあるAPIを持っていることを知っておくべきです.ここで設定する方法についての文書を見つけることができます.
私は、以下のURLを使用して取得要求を行うことによって、私のブログのすべてを得ることができました:https://dev.to/api/articles?username={YourUserName}

次の理解。JS用語集

ドキュメントを読んだ後、私は、私の特定のタスクのためのDEV . to APIからのブログ記事のリストを取得するために必要なことを実現 Static Generation with data . によると nextjs 静的なジェネレーションは、ビルド時にHTMLを生成するプリレンダリングメソッドです.プリレンダリングされたHTMLは、各リクエストで再利用されます.このデータをプリレンダリングで取得するには、ext . jsを使用して、GetStaticPropsという名前のAsync関数を同じファイルからエクスポートすることができます.
The nextjs また、getStaticPropsはサーバー側でのみ実行されます.クライアント側では決して実行されません.ブラウザのJSバンドルには含まれていません.これにより、ブラウザに送信されることなく直接データベースクエリのようなコードを書くことができます
私は私のブログを取得し、ページにそれらをレンダリングするために外部API nextjs .

ページへの投稿のレンダリング

最初に、私はdev . toに外部APIフェッチ要求を作りました.(もしあなたが「myusername」という名前のユーザ名を入力してください).ドキュメント nextjs { props : post }を返すと、コンポーネント全体が受信されますposts ビルド時の支柱として.

export async function getStaticProps() {
  const res = await fetch(
    "https://dev.to/api/articles?username={myUsername}"
  );
  const posts = await res.json();
  return {
    props: {
      posts,
    },
  };
}

その後、私はマップを投稿し、レンダリングを助ける2つの関数があります.リコールする場合、静的生成はビルド時にHTMLを生成するプリレンダリングメソッドです.事前にレンダリングされたHTMLは、各リクエストに再利用されます.この関数はサーバ側でビルド時に呼び出されます.クライアント側では呼び出されませんので、直接データベースクエリを行うこともできます.getstaticprops ()は、ビルド時にdev . toのポストが設定されるようにします.

function renderPosts(blog) {
  return (
    <div className="blogCard">
      <div className="blogCardImage">
        <img src={blog.social_image} alt="Image" />
      </div>
      <div className="blogCardContent">
        <h3>{blog.title}</h3>
        <span>{blog.description}</span>
      </div>
      <a href={blog.url} target="_blank">
        {" "}
      </a>
    </div>
  );
}

function devPosts({ posts }) {
  return <>{posts.map((post) => renderPosts(post))} </>;
}

私の全コードは

function renderPosts(blog) {
  return (
    <div className="blogCard">
      <div className="blogCardImage">
        <img src={blog.social_image} alt="Image" />
      </div>
      <div className="blogCardContent">
        <h3>{blog.title}</h3>
        <span>{blog.description}</span>
      </div>
      <a href={blog.url} target="_blank">
        {" "}
      </a>
    </div>
  );
}

function Blogs({ posts }) {
  return <>{posts.map((post) => renderPosts(post))} </>;
}

export async function getStaticProps() {
  const res = await fetch(
    "https://dev.to/api/articles?username={myUsername}"
  );
  const posts = await res.json();
  return {
    props: {
      posts,
    },
  };
}

export default devPosts;

あなたが質問/アドバイスがあるならば、コメントしてください.
私はnextjs(pun意図)の次のユーザー認証/認証を設定することを学ぶことを望む.
いつも読書に感謝!
心から
ブリタニー
今日の歌