프론트엔드 포트폴리오를 만들기 위한 Next.js 프로젝트 초기 세팅 방법을 정리합니다.
✅ 사용 스택
- Next.js
- TypeScript
- Tailwind CSS
🗂 1단계. 프로젝트 생성
📦 Next.js 프로젝트 생성
npx create-next-app@latest frontend-portfolio --typescript설치 중 나오는 질문에는 아래처럼 선택합니다.
| 질문 | 선택 |
|---|---|
| ESLint 사용 | ✅ Yes |
| Tailwind CSS 자동 설정 | ❌ No (직접 설정할 거예요) |
src/ 디렉토리 사용 | ✅ Yes |
| App Router 사용 | ✅ Yes (최신 방식) |
| Turbopack 사용 | ❌ No (아직 안정성 부족) |
| import alias 커스터마이징 | ✅ Yes → 그대로 @/* 입력 |
🧩 2단계. Tailwind CSS 설치 및 설정
📦 패키지 설치
cd frontend-portfolio
npm install -D tailwindcss postcss autoprefixerTailwind는 CSS 유틸리티 프레임워크이고,
PostCSS + Autoprefixer는 브라우저 호환 처리를 자동화해줍니다.
🛠 설정 파일 생성
npx tailwindcss init -p혹시 실행이 안 되면 대신 아래 명령어 사용
npx tailwindcss-cli@latest init -p이제 프로젝트 루트에 아래 파일이 생겼을 겁니다.
tailwind.config.js
postcss.config.js⚙️ tailwind.config.js 설정 수정
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
};
content경로를 반드시./src/**/*로 맞춰줘야 Tailwind가 클래스들을 인식합니다.
🎨 3단계. 전역 스타일 연결
📁 globals.css 설정 (src/app/globals.css)
@tailwind base;
@tailwind components;
@tailwind utilities;🧠 왜 이렇게 해야 할까?
Tailwind는 CSS 파일 안에서 위 세 가지 지시문을 통해
기본 스타일, 컴포넌트 스타일, 유틸리티 클래스를 차례대로 불러옵니다.
🧱 4단계. RootLayout 구성
📁 src/app/layout.tsx 전체 코드
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "프론트엔드 포트폴리오",
description: "프론트엔드 개발자가 되기 위해 만든 포트폴리오입니다.",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko">
<body
className={`
${geistSans.variable}
${geistMono.variable}
bg-white text-gray-900
dark:bg-gray-900 dark:text-white
min-h-screen font-sans
`}
>
{children}
</body>
</html>
);
}
html lang="ko"는 웹 접근성과 SEO에 중요합니다.
min-h-screen,bg-white,dark:bg-gray-900등은 Tailwind로 설정한 초기 전역 스타일입니다.
❌ 5단계. PostCSS 관련 에러 해결
📌 에러 내용 (2025년 Tailwind 3.4+ 기준 자주 발생)
Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin...✅ 해결 방법
npm install -D @tailwindcss/postcss그리고 postcss.config.js 파일 수정
module.exports = {
plugins: {
'@tailwindcss/postcss': {},
autoprefixer: {},
},
};Tailwind v3.4 이후에는 PostCSS 플러그인이 분리되어 따로 설치해야 합니다!
🚀 마지막! 개발 서버 실행
npm run dev브라우저에서 http://localhost:3000 에 접속해서 확인합니다.
Tailwind 클래스 테스트
<div className="text-2xl text-blue-500">Tailwind 작동 확인</div>✅ 마무리 체크리스트
- npx create-next-app으로 프로젝트 생성
- Tailwind 수동 설치 + 설정 완료
- globals.css에서 지시문 3개 입력
- layout.tsx에서 스타일 및 폰트 적용
- PostCSS 오류 해결 완료
- 개발 서버 정상 실행됨
