간단한 Next.js 13 블로그 구축을 위한 단계별 가이드

목차

1. 소개
2. 프로젝트 설정
3. 폴더 구조 이해
4. 모든 블로그 게시물 나열
5. 단일 블로그 게시물 표시
6. Next.js에서 로딩 UI 및 스트리밍 활용
7. 결론
8. 참고자료

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 경로

/app/api/posts/route.js 내부에서 블로그 게시물을 위한 더미 API를 설정합니다. next: { revalidate: 60 } 60초마다 데이터를 재검증하도록 지정합니다.

데이터 재검증

재검증은 데이터 캐시를 제거하고 최신 데이터를 다시 가져오는 프로세스입니다. 이는 데이터가 변경되어 최신 정보를 표시하려는 경우에 유용합니다.

캐시된 데이터는 다음 두 가지 방법으로 유효성을 다시 검사할 수 있습니다.

• 시간 기반 재검증 : 일정 시간이 지나면 데이터를 자동으로 재검증합니다. 이는 자주 변경되지 않고 최신성이 중요하지 않은 데이터에 유용합니다.
• 주문형 재검증 : 이벤트(예: 양식 제출)를 기반으로 데이터를 수동으로 재검증합니다. 주문형 재검증에서는 태그 기반 또는 경로 기반 접근 방식을 사용하여 데이터 그룹을 한 번에 재검증할 수 있습니다. 이는 가능한 한 빨리 최신 데이터를 표시하려는 경우에 유용합니다(예: 헤드리스 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에서는 서버에서 미리 렌더링되고 클라이언트에서 수화됩니다. 클라이언트 구성요소는 페이지 라우터 의 구성요소가 항상 작동했던 방식으로 생각할 수 있습니다.

 '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 애플리케이션을 구축하는 것은 재미있고 깨달을 수 있습니다.

우리는 프로젝트를 설정하고, 폴더 구조를 관리하고, 블로그 게시물을 나열하고, 개별 게시물을 표시하고, 로딩 상태를 터치하는 방법까지 배웠습니다.

웹 개발 커뮤니티에서 Next.js가 빠르게 성장함에 따라 여기에서 배운 기술은 매우 중요합니다.

이 기반을 확장하고 더 많은 기능을 탐색하고 즐거운 코딩을 즐겨보세요!

8. 참고자료

공식 Next.js 문서

기사의 데이터에는 DummyJson을 사용했습니다.

기사를 작성하기 위해 StackEdit을 사용했습니다.

학습에 시간을 투자하고 헌신해 주셔서 감사합니다. 귀하의 의견은 매우 귀중합니다. 본 포스팅에 추가사항이나 수정사항이 있으시면 연락주시기 바랍니다.

저와 연결하세요: dev.to 커뮤니티 @leandro_nnz

hackernoon.com 커뮤니티 @leandronnz

트위터 @digpollution

건배!