레시피 광장
?
사용자

Next.js Full-Stack Starter Recipe

[프로젝트 이름 or 폴더 or 위치] 해당 부분을 바꾸고 명령을 주세요. 미리 프로젝트 이름의 폴더를 생성해놓으시고 그쪽에서 바라볼수 있게 하세요. 다음 프로젝트 명령시 이름으로 대체 가능합니다. 예시 "메이커링크에서 무언가를 작업해"

#next.js#starter
recipe.sh
"이 레시피대로 프로젝트를 초기화하고 실행해줘" 위치는 [프로젝트 이름 or 폴더 or 위치] 야"

1. 프로젝트 초기화 (Initialization)
먼저 아래 명령어를 사용하여 프로젝트 기본 뼈대를 생성합니다. (현재 디렉토리에 생성)

Bash
npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
2. 필수 라이브러리 및 UI 도구 설치
현대적인 웹 개발을 위해 필요한 핵심 유틸리티를 추가합니다.

Bash
# UI 및 아이콘, 유틸리티 설치
npm install lucide-react clsx tailwind-merge
3. Cursor AI를 위한 프로젝트 구성 가이드
AI에게 다음 작업을 순차적으로 수행하도록 요청하십시오:

A. 디렉토리 구조 정리
src/components/common: 공통 컴포넌트 관리

src/lib: 유틸리티 함수 (예: utils.ts)

src/hooks: 커스텀 훅 관리

src/app: App Router 기반 페이지 관리

B. 기본 유틸리티 설정 (src/lib/utils.ts)
Tailwind 클래스 합성을 위한 유틸리티 함수를 생성합니다.

TypeScript
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
C. 레이아웃 및 홈 페이지 최적화
src/app/layout.tsx: 전역 폰트(Geist) 및 테마 설정 확인

src/app/page.tsx: 기존 Next.js 기본 템플릿을 제거하고, "Welcome to Next.js Recipe" 문구가 포함된 깔끔한 히어로 섹션으로 대체

4. 로컬 서버 실행 및 상태 확인
모든 설정이 완료되면 아래 명령어로 서버를 구동하고, 브라우저에서 http://localhost:3000 접속을 확인합니다.

Bash
npm run dev

💡 AI에게 보내는 최종 명령
"첨부한 'Next.js Full-Stack Starter Recipe'를 기반으로 현재 폴더에 프로젝트를 세팅해줘. 최신 App Router 방식을 사용하고, src/lib/utils.ts 설정과 메인 페이지의 간단한 UI 구성까지 완료한 뒤 마지막에 npm run dev를 실행해서 서버가 정상적으로 도는지 확인해줘. 그리고 작업이 끝나면 해당부분을 컨트롤 할수 있는 명령어를 정리해서 알려줘.
0
스크랩
0
좋아요
1
댓글
Next.js Full-Stack Starter Recipe