Next.js로 제작된 최신 블로그 시작 템플릿을 찾고 있다면 NextJS Base Blog 프로젝트가 훌륭한 출발점이 될 수 있습니다. 이 프로젝트는 Next.js 15, React 19, TypeScript 및 Tailwind CSS 4 로 구축된 모든 기능을 갖춘 오픈 소스 블로그 애플리케이션입니다 .
이 프로젝트는 깔끔한 아키텍처, 현대적인 UI components, 그리고 모의 API 레이어를 제공하여 백엔드 설정 없이 빠르게 블로그를 구축하려는 개발자에게 이상적입니다.
GitHub 저장소: https://github.com/bfotool/nextjs-base-blog
이 프로젝트는 특히 다음과 같은 경우에 유용합니다.
Next.js 앱을 배우는 개발자Router
블로그 또는 콘텐츠 웹사이트를 빠르게 구축하기
Next.js 보일러플레이트 프로젝트 생성하기
실제 백엔드 API를 연결하기 전에 UI 기능을 개발합니다.
프로젝트 개요
NextJS Base Blog 는 최신 콘텐츠 웹사이트에서 흔히 볼 수 있는 다양한 기능을 갖춘, 바로 사용 가능한 블로그 템플릿 으로 설계되었습니다 .
본 프로젝트에는 다음이 포함됩니다:
주요 게시물이 있는 홈페이지
블로그 게시물 페이지
카테고리 필터링
전문 검색
쪽수 매기기
목차
관련 게시물
어두운/밝은 테마
이 프로젝트에서 가장 흥미로운 부분 중 하나는 Axios 인터셉터를 사용하여 REST API를 시뮬레이션하는 Fake API Layer 입니다. 이를 통해 개발자는 백엔드 서버 없이도 애플리케이션을 구축하고 테스트할 수 있습니다 .
주요 특징
홈페이지
홈페이지에는 몇 가지 중요한 섹션이 표시됩니다.
주요 영웅 게시물
카테고리 필터
블로그 게시물 그리드
페이지네이션 내비게이션
레이아웃은 반응형 으로 설계되어 데스크톱과 모바일 기기 모두에 최적화되어 있습니다.
블로그 게시물 페이지
각 기사는 동적 경로를 통해 접근할 수 있습니다.
/blog/[slug]
블로그 게시물 페이지에는 다음과 같은 유용한 기능이 포함되어 있습니다.
전체 기사 내용
자동 목차 생성
예상 독서 시간
소셜 공유 버튼
관련 게시물 추천
이러한 기능들은 최신 블로그 플랫폼과 유사한 전문적인 읽기 경험을 제공하는 데 도움이 됩니다.
카테고리 페이지
사용자는 카테고리별로 게시물을 찾아볼 수 있습니다.
예시 경로:
/blog/category/[slug]
이 기능을 통해 독자는 특정 주제 내의 콘텐츠를 탐색할 수 있습니다.
검색 기능
이 프로젝트에는 검색 페이지가 내장되어 있습니다.
/search
검색 지원 기능:
실시간 결과
디바운스 입력
제목, 발췌문 및 태그를 기준으로 검색
이는 사용성을 향상시키고 사용자가 관련 콘텐츠를 빠르게 찾을 수 있도록 도와줍니다.
회사 소개 및 연락처 페이지
이 프로젝트에는 전문 블로그에서 흔히 볼 수 있는 추가 페이지도 포함되어 있습니다.
소개 페이지
소개 페이지에서는 다음 내용을 소개합니다:
팀
프로젝트 이야기
핵심 가치
연락처 페이지
연락처 페이지에는 다음과 같은 기능을 갖춘 완벽하게 유효성 검사를 거친 양식이 포함되어 있습니다.
폼 유효성 검사
토스트 알림
성공 및 오류 피드백
다크 모드 지원
이 블로그는 다크 모드와 라이트 모드를 모두 지원합니다 .
주요 기능은 다음과 같습니다:
자동 시스템 테마 감지
수동 전환
localStorage를 사용한 테마 지속성
가짜 API 레이어(백엔드 없이 개발)
이 프로젝트에서 가장 흥미로운 부분 중 하나는 가짜 API 시스템 입니다 .
실제 서버를 호출하는 대신, 애플리케이션은 Axios 인터셉터를 사용하여 REST API 응답을 시뮬레이션합니다.
가짜 API는 어떻게 작동할까요?
Axios 인스턴스는 다음 위치에 생성됩니다.
src/services/api-client.ts
환경 변수가 활성화된 경우:
NEXT_PUBLIC_USE_MOCK_API=true
요청은 네트워크에 도달하기 전에 가로채집니다.
모의 처리기는 실제와 같은 지연 시간(200~600ms)을 가진 가짜 응답을 반환합니다.
응답은 실제 API 응답처럼 동작합니다.
모의 데이터는 다음 위치에 저장됩니다.
src/mocks/
포함:
샘플 게시물
저자
카테고리
사용 가능한 API 엔드포인트
모의 API는 다음과 같은 여러 엔드포인트를 지원합니다.
| 방법 | 엔드포인트 | 설명 |
|---|---|---|
| 얻다 | /게시물 | 페이지네이션된 블로그 게시물 |
| 얻다 | /게시물/추천 | 추천 게시물 |
| 얻다 | /게시물/:슬러그 | 블로그 게시물 하나 |
| 얻다 | /카테고리 | 카테고리 목록 |
| 얻다 | /저자 | 저자 목록 |
| 우편 | /연락하다 | 문의 양식을 제출하세요 |
기술 스택
이 프로젝트는 최신 프런트엔드 스택을 사용합니다.
| 층 | 기술 |
|---|---|
| 뼈대 | Next.js 15 |
| UI 라이브러리 | 리액트 19 |
| 언어 | 타입스크립트 |
| 스타일링 | 테일윈드 CSS 4 |
| HTTP 클라이언트 | 악시오스 |
| 아이콘 | 루사이드 리액트 |
| 린팅 | ESLint |
| 서식 지정 | 더 예쁜 |
이 스택은 다음을 제공합니다.
강력한 유형의 안전장치
유지보수 가능한 아키텍처
최신 개발자 경험
프로젝트 구조
프로젝트 구조는 깔끔하고 확장 가능한 아키텍처를 따릅니다.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
앱Router
해당 app디렉터리에는 모든 애플리케이션 경로가 포함되어 있습니다.
예시:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
이는 Next.js의 최신 버전에서 도입된 Next.js 앱 Router아키텍처를 따릅니다.
구성 요소
UI components는 논리적인 그룹으로 구성됩니다.
components/layout
components/common
components/blog
이러한 구조는 UI 코드를 체계적으로 정리하고 유지 관리를 용이하게 해줍니다.
서비스 계층
해당 services폴더에는 API 관련 로직이 포함되어 있습니다.
API 클라이언트 구성
우편 서비스
카테고리 서비스
문의 양식 서비스
이 계층은 데이터 가져오기 로직을 UI와components 분리하여 확장성을 향상시킵니다.
설치 가이드
요구 사항
시작하기 전에 다음 사항을 확인하세요:
Node.js 18 이상
npm, yarn 또는 pnpm
저장소를 복제하세요
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
필수 구성 요소 설치
npm install
환경 변수 구성
cp .env.example .env
개발 서버를 시작하세요
npm run dev
브라우저를 열고 다음 주소를 방문하세요:
http://localhost:3000
사용 가능한 스크립트
| 명령 | 설명 |
|---|---|
| npm run dev | 개발 서버 시작 |
| npm run 빌드 | 프로덕션 빌드를 생성합니다. |
| npm run start | 프로덕션 서버 시작 |
| npm run lint | ESLint를 실행하세요 |
| npm 실행 형식 | Prettier를 사용하여 코드 형식을 지정합니다. |
| npm run type-check | TypeScript 검사를 실행하세요 |
실제 API로 전환
프로젝트를 실제 백엔드 API에 연결하려면 다음 단계를 따르세요.
1단계: 모의 API 비활성화
파일 을 편집하세요 .env:
NEXT_PUBLIC_USE_MOCK_API=false
2단계: API 기본 URL 설정
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
3단계: 데이터 유형 일치
백엔드 API가 다음 위치에 있는 TypeScript 정의와 일치하는 데이터를 반환하는지 확인하십시오.
src/types/index.ts
추가적인 코드 변경은 필요하지 않습니다.
콘텐츠 맞춤 설정
모의 콘텐츠는 다음에서 편집할 수 있습니다.
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
이를 통해 개발자는 데모 콘텐츠를 빠르게 맞춤 설정할 수 있습니다.
테마 및 UI 사용자 정의
전역 스타일링은 다음 위치에서 찾을 수 있습니다.
src/app/globals.css
이 프로젝트에서는 다음 글꼴을 사용합니다.
DM 산스
젯브레인즈 모노
디자인 요구 사항에 따라 스타일을 수정하거나 글꼴을 교체할 수 있습니다.
결론
NextJS Base Blog는 Next.js를 사용하여 블로그를 구축하기 위한 강력하고 현대적인 스타터 템플릿입니다.
이 프로젝트의 주요 장점은 다음과 같습니다.
최신 기술 스택
깔끔한 아키텍처
개발용 모의 API
실제 백엔드 API와의 손쉬운 통합
반응형 UI 및 최신 기능
Next.js를 사용하여 블로그, 개발자 웹사이트 또는 콘텐츠 플랫폼을 구축하는 경우 이 저장소를 통해 개발 시간을 크게 절약할 수 있습니다.
소스 코드는 다음 링크에서 확인할 수 있습니다: https://github.com/bfotool/nextjs-base-blog