[Next.js] 프로젝트 시작하기

 

먼저 확인할 건 Node.js 버전이다.
현재 Next.js 공식 설치 문서는 최소 Node.js 20.9를 요구한다. create-next-app으로 시작하면 기본적으로 TypeScript, Tailwind CSS, ESLint, App Router, Turbopack 등을 선택해서 만들 수 있다.

 

터미널에서 원하는 위치로 이동한 다음:

npx create-next-app@latest admin-next

 

질문이 나오면 이렇게 고르면 된다.

• TypeScript → Yes
• ESLint → Yes
• Tailwind CSS → No
• src/ directory → Yes
• App Router → Yes
• Turbopack → Yes
• import alias → No

설치 끝나면:

cd admin-next
npm run dev

 

브라우저에서
http://localhost:3000 열면 된다.

 

---

 

 

현재 나의 상황!

사용자 프로젝트를 시작하기 전, 내부 관리자 페이지를 연습 삼아 만들어보게 되었다.

 

 

 

 

 

나에게 제일 좋은 방식! 템플릿 100% 의존 X, 맨땅 100% 제작 X 딱 중간이 좋다.

 

예를 들면:

• Next.js 프로젝트 기본 세팅은 가져가기
• 관리자 공통 레이아웃은 참고하기
• 사이드바/헤더 구조는 참고하기
• 대신 실제 페이지는 네가 만들기
• 테이블/폼/상세화면은 직접 구현하기

이렇게 해야 넥스트 구조는 덜 헤매고, 실제 구현 감각은 제대로 남는다!

왜 새로 다 만드는게 비효율적이냐면 초보일 때는 “공부”보다 “삽질” 비중이 너무 커지기 때문이다.

 

예를 들어

• layout을 어디에 둬야 하지?
• app router에서 이 경로가 왜 이러지?
• client component는 왜 필요하지?
• bootstrap js는 어디서 불러오지?
• 공통 레이아웃 분리는 어떻게 하지?

이런 걸 한 번에 다 맞닥뜨리면 정작 중요한 관리자 화면 구현까지 못 가는 경우가 많다.

 

 

 

 

 

 

그렇기 때문에 나에게 맞는 방식은 이거다!

 

1. Next.js 기본 틀은 사용

• app router 구조
• layout.tsx
• 기본 페이지 구조

2. 관리자 공통 프레임만 먼저 만들기

• sidebar
• header
• content area

3. 실제 업무 화면은 직접 만들기

• 목록
• 상세
• 등록/수정
• 검색/필터

이러면 공부도 되고 결과물도 나온다.

 

한 줄로 말하면

“새로 다 만들기”보다 “기본 틀은 참고하고, 실제 페이지는 직접 만들기”가 지금 나한테 제일 좋다.

 

진짜 추천은 공통 레이아웃까지만 참고하고, 그 안의 관리자 페이지는 내가 직접 만드는 방식이다.

 

---

 

 

직접 만들 것

 

1. 폴더 구조

직접 만들어봐야 한다.

이걸 직접 짜봐야

• app router가 뭔지
• layout이 어떻게 중첩되는지
• 동적 라우팅이 뭔지 감이 온다.

 

2. 공통 레이아웃

이건 꼭 직접 해보는 게 좋다.

• 사이드바
• 헤더
• 본문 영역
• 페이지 타이틀 영역

이걸 직접 만들면 관리자 페이지의 뼈대를 이해하게 된다.

 

 

3. 페이지 라우팅 연결

직접 해야 한다.

• 목록 → 상세 이동
• 목록 → 등록 이동
• 상세 → 수정 이동

Link 쓰고, 경로 연결하면서 넥스트 페이지 구조에 익숙해져야 한다.

 

 

4. 실제 업무 페이지

이건 무조건 직접 만드는 걸 추천.

 

예:

• 회원 목록
• 공지사항 목록
• 예약 관리 목록
• 등록/수정 폼
• 상세 페이지

이 부분이 진짜 공부다!
템플릿은 여기까지 대신 해주면 오히려 남는 게 적다.

 

 

5. 더미데이터 연결

직접 해봐야 한다.

const users = [
  { id: 1, name: '홍길동', status: 'active' },
  { id: 2, name: '김민지', status: 'inactive' },
]

 

이걸 map 돌려서 테이블 만들고 상태값 뱃지 붙이고 빈 데이터 처리하는 게 중요하다.

 

 

6. 폼 처리

직접 해보는 걸 강추.

• input
• select
• textarea
• onChange
• 저장 버튼
• validation 기초

관리자는 결국 조회 + 입력이라 폼을 직접 안 만들면 실력이 잘 안 는다.

 

 

 

 

---

 

 

 

 

 

가져다 써도 되는 것

이건 굳이 처음부터 다 안 만들어도 된다.

 

 

1. 스타일 기본 세팅

가져다 써도 된다.

• Bootstrap
• reset
• spacing
• grid
• button 기본 스타일
• form 기본 스타일

이건 처음부터 손으로 다 짜면 너무 오래 걸린다.

 

 

 

2. 아이콘

직접 만들 필요 없다.

• Bootstrap Icons
• Lucide
• Heroicons

아이콘은 가져다 쓰는 게 맞다.

 

 

3. 기본 UI 조각

어느 정도 가져다 써도 괜찮다.

 

예:

• 모달
• 토스트
• 탭
• 드롭다운
• 페이지네이션 UI

이건 “왜 이렇게 동작하는지”만 이해하면 되고, 초반엔 직접 구현보다 활용이 더 중요하다.

 

 

4. 관리자 샘플 레이아웃 참고

이건 적극적으로 참고해도 된다.

• 사이드바 배치
• 헤더 구성
• 카드 배치
• 테이블 상단 검색/버튼 영역
• 필터 UI

하지만 복붙해서 끝내는 건 비추천이고 “구조 참고” 정도가 좋다.

 

 

5. 공통 컴포넌트 디자인 패턴

이건 가져와도 된다.

 

예:

• PageHeader
• DataTable
• StatusBadge
• SearchFilterBar

이름이나 구조 아이디어는 참고하고, 내용은 내 프로젝트에 맞게 바꾸면 된다.

 

 

절대 처음부터 다 안 만들어도 되는 것

이건 초반에 손대면 피곤해진다.

• 인증 시스템 전체
• 복잡한 상태관리 라이브러리
• 고급 테이블 기능
• 서버 액션 고급 패턴
• 권한 관리 전체 구조
• 차트 라이브러리 세세한 커스텀
• 완벽한 폴더 아키텍처

초보일 때는 이거 붙잡으면 핵심인 관리자 화면 제작이 밀린다.

 

 

 

---

 

 

 

나한테 가장 추천하는 방식

 

가져올 것

• Bootstrap 스타일
• 아이콘
• 기본 UI 일부
• 관리자 레이아웃 참고 구조

직접 만들 것

• Next.js 폴더 구조
• app router 페이지 구성
• admin layout
• 목록/상세/등록/수정 화면
• 더미데이터 렌더링
• 폼 처리
• 링크 이동

이 조합이 제일 좋다~!

 

 

 

직접 만들 것
“넥스트 구조를 이해하는 데 필요한 것”

가져다 써도 되는 것
“시간만 잡아먹고 학습효율은 낮은 것”

 

 

 

나는 지금
UI를 처음 만드는 사람이 아니라 넥스트 구조를 처음 배우는 사람이다.

그래서
디자인 시스템이나 잔기술을 새로 만드는 것보다, Next.js에서 페이지와 레이아웃을 직접 짜보는 게 훨씬 중요하다.

 

 

 

 

 

 

 

 

화이팅-!!