### 実現したいことブログのサイドバーの新着記事、カテゴリー、アーカイブを表示したい。 https://gyazo.com/2b185bb5482ab265b1bd6cde9469e4f8 ### 発生している問題新着記事、カテゴリー、アーカイブが取得できていない。 https://gyazo.com/35da03bc7cea51dedf18aec04bfb3f0a https://gyazo.com/aaad3994ee32f6fb434b31dd93f79f72 ### ソースコード components/providers/QueryProvider.tsx ```TS: "use client" import { useState } from "react" import { QueryClient, QueryClientProvider } from "@tanstack/react-query" // クエリプロバイダ const QueryProvider = ({ children }: { children: React.ReactNode }) => { const [queryClient] = useState(() => new QueryClient()) return ( {children} ) } export default QueryProvider ``` app/layout.tsx ```TS: import type { Metadata, Viewport } from "next"; import { M_PLUS_1 } from "next/font/google" import QueryProvider from "@/components/providers/QueryProvider" import "./globals.css"; const mPlus1 = M_PLUS_1({ weight: ["400", "700", "900"], subsets: ["latin"], }) export const metadata: Metadata = { title: { template: "ブログシステム", default: "ブログシステム", }, } export const viewport: Viewport = { maximumScale: 1, userScalable: false, } interface RootLayoutProps { children: React.ReactNode } // ルートレイアウト const RootLayout = async ({ children }: RootLayoutProps) => { return ( {children} ) } export default RootLayout ``` types/index.ts ``` export interface AboutType { id: string content: string createdAt: string publishedAt: string updatedAt: string } export interface CategoryType { id: string name: string color: string } export interface BlogType { id: string title: string content: string image: { url: string } category: CategoryType ranking?: number isRecommended: boolean isSpecial: boolean createdAt: string publishedAt: string updatedAt: string } export interface ArchiveMonthType { year: number month: number count: number } export interface CategoryCountType { id: string name: string count: number } export interface SidebarData { latestBlogs: BlogType[] archiveMonths: ArchiveMonthType[] categoryCounts: CategoryCountType[] } ``` /components/navigation/Sidebar.tsx ```TS "use client" import { useQuery } from "@tanstack/react-query" import { format } from "date-fns" import { microcms } from "@/lib/microcms" import Image from "next/image" import Link from "next/link" import { BlogType, ArchiveMonthType, CategoryCountType, SidebarData, } from "@/types" // サイドバーのデータを取得する関数 const fetchSidebarData = async (): Promise => { const allBlogs = await microcms.getList({ endpoint: "blog", queries: { orders: "-publishedAt", limit: 1000, }, }) // 最新の5件を取得 const latestBlogs = allBlogs.contents.slice(0, 5) // アーカイブの年月を取得 const extractArchiveMonths = (blogs: BlogType[]): ArchiveMonthType[] => { const monthCounts = new Map() blogs.forEach((blog) => { const date = new Date(blog.publishedAt || blog.createdAt) const year = date.getFullYear() const month = date.getMonth() + 1 const key = `${year}-${month}` const current = monthCounts.get(key) || { year, month, count: 0 } monthCounts.set(key, { ...current, count: current.count + 1 }) }) return Array.from(monthCounts.values()).sort( (a, b) => b.year - a.year || b.month - a.month ) } // カテゴリごとの記事数を取得 const extractCategoryCounts = (blogs: BlogType[]): CategoryCountType[] => { const categoryCounts = new Map() blogs.forEach((blog) => { const { id, name } = blog.category const current = categoryCounts.get(id) || { id, name, count: 0 } categoryCounts.set(id, { ...current, count: current.count + 1 }) }) return Array.from(categoryCounts.values()).sort((a, b) => b.count - a.count) } return { latestBlogs, archiveMonths: extractArchiveMonths(allBlogs.contents), categoryCounts: extractCategoryCounts(allBlogs.contents), } } // サイドバー const Sidebar = () => { const { data: sidebarData, isLoading } = useQuery({ queryKey: ["sidebarData"], queryFn: fetchSidebarData, staleTime: 1000 * 60 * 5, // 5分間キャッシュを保持 refetchOnWindowFocus: true, // フォーカス時に再フェッチ }) const latestBlogs = sidebarData?.latestBlogs || [] const categoryCounts = sidebarData?.categoryCounts || [] const archiveMonths = sidebarData?.archiveMonths || [] return (

Haru

Next.jsとMicroCMSを使用したブログサイト構築チュートリアルです。技術ブログなど、すぐに運用できるようになっています。

{/* 新着記事 */}

新着記事

{isLoading ? (

) : ( latestBlogs.map((blog, index, array) => (

{blog.title}

)) )}

{/* カテゴリ */}

カテゴリ

{isLoading ? (

) : ( categoryCounts.map((category, index, array) => (

{category.name}

{category.count}

)) )}

{/* アーカイブ */}

アーカイブ

{isLoading ? (

) : ( archiveMonths.map((archive, index, array) => { return (

{format( new Date(archive.year, archive.month - 1), "yyy年MM月" )}

{archive.count}

) }) )}

) } export default Sidebar ``` ### 補足情報以下のリポジトリのソースコードを参考に作成しました。 https://github.com/haruyasu/nextjs-microcms-blog-tutorial

質問

受付中サイドバーの新着記事、カテゴリーアーカイブチュートリアル2024/09/16 08:40

質問

受付中サイドバーの新着記事、カテゴリーアーカイブチュートリアル2024/09/16 08:40

受付中
サイドバーの新着記事、カテゴリーアーカイブ
チュートリアル
2024/09/16 08:40

受付中
サイドバーの新着記事、カテゴリーアーカイブ
チュートリアル
2024/09/16 08:40