目次 導入 プロジェクトのセットアップ フォルダー構造を理解する すべてのブログ投稿のリスト 単一のブログ投稿を紹介する Next.js での読み込み UI とストリーミングの利用 結論 参考文献 1. はじめに こんにちは！ 今日のチュートリアルでは、Next.js を使用してシンプルかつ強力なブログを作成する旅に乗り出します。  Next.js を初めて使用する場合でも、基礎をさらに磨きたいと考えている場合でも、このガイドはあなたに合わせて作成されています。 プロジェクトのセットアップ方法だけでなく、フォルダー構造、サーバー側レンダリングなどについても説明します。 完全なリポジトリは 見つけることができます ここで さっそく飛び込んでみましょう！  2. プロジェクトのセットアップ ステップ 1: アプリを作成する まず、次のコマンドを使用して Next.js アプリを設定しましょう。   npx create-next-app@latest blog-example 完了したら、新しく作成したプロジェクトに移動します。   cd blog-example ステップ 2: 開発サーバーを起動する このガイドでは 使用していますが、  または 自由に使用してください。 yarn npm pnpm   yarn dev ここで、  にアクセスすると、デフォルトの Next.js テンプレート ページが見つかります。 http://localhost:3000  3. フォルダー構造を理解する この時点で、Next.js アプリの構造を理解すると有益です。フォルダーのレイアウトを視覚的に表現した次の画像を参照してください。   4. すべてのブログ投稿のリスト 4.1. APIルート 内に、ブログ投稿用のダミー API を設定します。ここで、   、60 秒ごとにデータを再検証することを指定します。 /app/api/posts/route.js next: { revalidate: 60 }   データの再検証 再検証は、データ キャッシュを消去し、最新のデータを再フェッチするプロセスです。これは、データが変更され、最新の情報を確実に表示したい場合に便利です。 キャッシュされたデータは、次の 2 つの方法で再検証できます。 : 一定の時間が経過した後にデータを自動的に再検証します。これは、頻繁に変更されず、鮮度がそれほど重要ではないデータに役立ちます。 時間ベースの再検証 : イベント (フォーム送信など) に基づいてデータを手動で再検証します。オンデマンド再検証では、タグベースまたはパスベースのアプローチを使用して、データのグループを一度に再検証できます。これは、最新のデータをできるだけ早く表示したい場合 (ヘッドレス CMS のコンテンツが更新された場合など) に便利です。 オンデマンド再検証   時間ベースの再検証 一定の間隔でデータを再検証するには、  の オプションを使用して、リソースのキャッシュ有効期間 (秒単位) を設定します。 fetch next.revalidate 以下に例を示します。   import { NextResponse } from 'next/server' export async function GET() { const res = await fetch('https://dummyjson.com/posts', { next: { revalidate: 60 }, }); const data = await res.json(); return NextResponse.json(data); }  4.2.投稿を表示する サーバーから投稿を取得して表示するコンポーネント を作成しましょう。ミニマルにスタイリングしましたが、自由にアレンジしてください。 PostsPage   export default async function PostsPage() { const res = await fetch('http://localhost:3000/api/posts'); const { posts } = await res.json(); return ( // Styles are for readability; customize as you wish! <div> <h1>All Blog Posts</h1> <hr style={{ width: '220px' }} /> <div style={{ paddingTop: '40px' }}> {posts.map(post => ( <article key={post.id}> <h2>{post.title}</h2> <p style={{ paddingBottom: '30px'}}>{post.body}</p> </article> ))} </div> </div> ); } これまでのところ、記事のリストが表示されているはずです。   5. 単一のブログ投稿を紹介する 5.1.投稿のリンク 各投稿タイトルをクリックできるようにするには、Next.js から コンポーネントを追加します。 Link   import Link from 'next/link'; export default async function PostsPage() { // ... rest of the code return ( <div> // ... rest of the code <div style={{ paddingTop: '40px' }}> {posts.map(post => ( <article key={post.id}> <Link href={`posts/${post.id}`}> <h2>{post.title}</h2> </Link> <p style={{ paddingBottom: '30px'}}>{post.body}</p> </article> ))} </div> </div> ); }  5.2.単一投稿の API ルート Next.js API ルートでは、ID に基づいて特定の投稿を取得します。   import { NextResponse } from 'next/server' export async function GET(request, { params }) { const { id } = params; const res = await fetch(`https://dummyjson.com/posts/${id}`, { next: {revalidate: 60} }); const post = await res.json(); return NextResponse.json({ post }); }  5.3.単一の投稿を表示する 個々の投稿を表示するには、Next.js のサーバー コンポーネントとクライアント コンポーネントの違いを理解することが重要です。 指定されたコンポーネント  、クライアント側のデータ取得を使用します。 SinglePost これは基本的に、ページがレンダリングされた後にデータがクライアントでフェッチされることを意味します。パフォーマンスを犠牲にすることなく、豊かな対話性を実現します。詳細については を参照してください。 、React Essentials の Next.js ドキュメント クライアントコンポーネント クライアント コンポーネントを使用すると、アプリケーションにクライアント側の対話性を追加できます。 Next.js では、サーバー上で 、クライアント上でハイドレートされます。クライアント コンポーネントは、  のコンポーネントが常に動作してきた方法であると考えることができます。 事前レンダリングされ Pages Router   'use client' import Link from 'next/link'; import { useEffect, useState } from 'react'; export default function SinglePost({params}) { const [post, setPost] = useState(null); const fetchPost = async (id) => { const res = await fetch(`http://localhost:3000/api/posts/${id}`); const {post} = await res.json(); post && setPost(post); } useEffect(() => { fetchPost(params.id); }, []) return ( <div style={{ paddingTop: '20px', paddingLeft: '20px' }}> <Link href='/'>Back to home</Link> <div style={{ paddingTop: '50px' }}> <article> <h1 style={{ paddingBottom: '10px' }}>{post?.title}</h1> {post?.tags.map((tag, index) => <span style={{ fontWeight: 'lighter' }} key={index}>{tag} | </span>)} <br/> <p style={{ paddingTop: '10px' }}>{post?.body}</p> </article> </div> </div> ) } これで、記事の詳細が表示されるはずです。スタイルの欠如を許してください！   6. Next.js での読み込み UI とストリーミングの利用 ユーザー エクスペリエンスを向上させるには、読み込みコンポーネントの追加を検討してください。 Next.js は、読み込み UI とストリーミングを備えた組み込みソリューションを提供します。コンテンツの準備ができるまで読み込みスピナーを表示するのに役立ちます。  をさらに詳しく学習してください。 ヒント: UI の読み込みとストリーミングに関するこの公式ガイド 例えば：   // You can add any UI inside Loading, including a Skeleton. export default function Loading() { return <LoadingSkeleton />}  7. 結論 Next.js アプリケーションの構築は、楽しくもあり、勉強にもなります。 私たちは、プロジェクトのセットアップ、フォルダー構造の管理、ブログ投稿の一覧表示、個々の投稿の紹介、さらには読み込み状態についても学習しました。  Web 開発コミュニティにおける Next.js の急速な成長に伴い、ここで学んだスキルは非常に貴重です。 この基盤を拡張して、さらに多くの機能を探索し、楽しくコーディングしてください。  8. 参考文献 Next.js 公式ドキュメント 記事のデータには 使用しました DummyJsonを 記事の作成には を使用しました StackEdit 貴重なお時間を割いて学習に取り組んでいただき、ありがとうございました。あなたのフィードバックは非常に貴重です。この投稿に追加や修正がある場合は、ご連絡ください。   コミュニティ までご連絡ください。 dev.to @leandro_nnz   コミュニティ hackernoon.com @leandronnz  Twitter  @digpollution 乾杯！

Read My Stories

Portfolio

Hire Me

Buy Me a Coffee

Next.Js 13 Parallel Routes: A Comprehensive Guide

Mastering JavaScript Shorthands

PostgreSQL or MySQL: What Should I Choose for My Full-Stack Project?

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

Make resilience your competitive advantage

シンプルな Next.js 13 ブログを構築するためのステップバイステップガイド

About Author

コメント

ラベル

この記事は

Related Stories

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps

シンプルな Next.js 13 ブログを構築するためのステップバイステップ ガイド