웹 개발한입무료
Next.js 블로그 만들기
Tailwind CSS와 shadcn/ui를 활용한 모던 블로그 프로젝트를 처음부터 만드는 프롬프트
342명 사용
프롬프트 미리보기
Next.js 15 App Router를 사용해서 블로그를 만들어줘. 요구사항: - Tailwind CSS 4 + shadcn/ui 사용 - 메인 페이지에 아티클 목록 (카드형 그리드) - 상세 페이지에 마크다운 렌더링 - 반응형 디자인 (모바일 우선) - SEO 메타태그 자동 생성
전체 프롬프트
Next.js 15 App Router를 사용해서 블로그를 만들어줘.
요구사항:
- Tailwind CSS 4 + shadcn/ui 사용
- 메인 페이지에 아티클 목록 (카드형 그리드)
- 상세 페이지에 마크다운 렌더링
- 반응형 디자인 (모바일 우선)
- SEO 메타태그 자동 생성
폴더 구조:
src/
app/
layout.tsx # 공통 레이아웃
page.tsx # 메인 (아티클 목록)
posts/[slug]/
page.tsx # 아티클 상세
components/
ui/ # shadcn/ui 컴포넌트
layout/
Header.tsx
Footer.tsx
ArticleCard.tsx
lib/
utils.ts # cn() 유틸리티
markdown.ts # 마크다운 파싱
스타일링 규칙:
- 최대 너비 860px, 좌우 패딩 24px
- 폰트: Pretendard (본문), Geist Mono (코드)
- 색상: #1c1917 (텍스트), #ff6b35 (액센트), #78716c (서브텍스트)
- 카드: 라운드 16px, 호버 시 그림자 효과
- 코드 블록: 배경 #1e1e2e, Catppuccin Mocha 테마
마크다운 렌더링:
- gray-matter로 프론트매터 파싱
- next-mdx-remote 또는 remark/rehype 파이프라인
- 코드 하이라이팅: shiki 사용
- 이미지 최적화: next/image 자동 적용
SEO:
- generateMetadata()로 동적 메타태그
- Open Graph 이미지 자동 생성
- sitemap.xml 자동 생성
- robots.txt 설정이 프롬프트 사용법
1
프롬프트를 복사해서 Claude Code 또는 ChatGPT에 붙여넣기
2
[ ] 로 표시된 부분을 본인 프로젝트에 맞게 수정
3
AI가 생성한 코드를 프로젝트에 적용
4
필요에 따라 추가 지시를 하며 코드를 개선
예시 결과
이 프롬프트를 사용하면 아래와 비슷한 결과물을 얻을 수 있습니다.
app/page.tsx
typescript
export default function Home() {
const posts = getAllPosts();
return (
<main className="mx-auto max-w-[860px] px-6">
<h1 className="text-3xl font-bold">Blog</h1>
<div className="grid gap-6 sm:grid-cols-2">
{posts.map((post) => (
<ArticleCard key={post.slug} post={post} />
))}
</div>
</main>
);
}