【Next.js】 MicroCMSの最新3記事を取得するためのコード

【Next.js】 MicroCMSの最新3記事を取得するためのコード

MicroCMSを使って、ドキュメントをみながらやってみたものの、
map関数がいいよ！！

というものですから従って書いたわけです。

そうすると、残念ながら今まで書いた記事が全部表示されてしまうわけです。。笑

そうならないために絞り込みを取得したい！！と思い解決できたので、ここに残しておきます🙋‍♂️

##MicroCMSの最新3記事を取得する方法

index.jsx

import { client } from 'libs/client';
... //ここには入れたいimportを

export default function Home({ blog }) {
  return (
<main>
<div className="max-w-screen-xl mx-auto px-4">
          <ul className="grid md:grid-cols-3 lg:grid-cols-3 gap-4">
            {blog.map((blog) => (
              <li key={blog.id} className="list-none">
                <Link href={`/blog/${blog.id}`}>
                  <img
                    src={blog.eyecatch.url}
                    sizes="100vw"
                    style={{
                      width: '100%',
                      maxWidth: '100%',
                      height: 'auto',
                    }}
                    alt="ブログアイキャッチ画像"
                  />
                  <h3 className="mt-4 text-md font-bold">{blog.title}</h3>
                </Link>
              </li>
            ))}
          </ul>
        </div>
	</main>
    </>
  );
}

export const getServerSideProps = async () => {
  const data = await client.get({
    endpoint: 'blog',
    queries: { limit: 3, orders: '-publishedAt' }, // 最新3記事を取得
  });
  return {
    props: {
      blog: data.contents,
    },
  };
};

これで解決できます。

実は、1行で取得できます。
async await構文の中の、endpointsの下です。

queries: { limit: 3, orders: '-publishedAt' }, // 最新3記事を取得

これで取得できるようになります。

ぜひ試して解決してみてくださいね😌