이번에 Next.js를 공부하면서 배운 개념과 지식을 정리해보려 합니다.
이번 글은 왜 Next.js를 공부해야하는지 & 프로젝트 세팅 등의 주제로 작성해보겠습니다.
Next.js를 사용하고 계신가요?
🤔 Next.js를 사용 중이신가요?
그렇다면 왜 사용하시나요?
- 요즘 많이 쓰니까?
- 회사에서 사용하니 사용하는건가요?
- SPA보다 SSR이 필요한 서비스라서 인가요?
분명 다양한 이유가 있을 겁니다. 위에는 단순히 제가 생각한 예시 입니다 ㅎㅎ
그리고 사실 저는 아직까지는 Next.js를 본격적으로 다뤄본 적은 없었습니다. (이제부터 죽기살기로 해야겠네요.)
저는 지금까지 React + TypeScript를 기반으로 프로젝트를 진행해왔고, 더 깊이있는 학습을 위해 선택했던 길이였습니다.
그런데 최근 들어 주변에서 Next.js 기반 프로젝트가 많아지고 있고, 최근 오픈 소스 프로젝트 코드를 보면 Next.js가 기본처럼 쓰이더라고요.
“빠르게 변화하는 프론트엔드 개발에서 더 이상 Next.js를 모르는 건 말이 안 된다”는 생각이 들었습니다.
그래서 시작하게 되었습니다!
1. Next.js는 뭐지?
Next.js는 React의 라이브러리 프레임워크입니다. 즉, 리액트 위에서 동작하는것입니다.
그래서 React는 View 담당, Next는 기능들로 "프레임워크답게"를 제공하는 역할을 합니다.
React만 사용할 경우 라우팅이나 SSR 등의 기능을 직접 구성해야 하지만,
Next.js는 이런 기능들을 기본으로 제공하면서 생산성과 확장성을 크게 높여줍니다.
💡특징
✅ 서버사이드 랜더링(SSR)과 정적 사이트 생성(SSG) 지원
React는 태생부터 한계가 존재합니다. 그것은 바로 SPA라는것이죠.
처음 클라이언트가 서비스에 마운트 시 어쩔수없이 그 서비스의 필요한 JS들을 클라이언트 측에서 요청을 합니다. 그렇기 때문에 초기로딩이 무겁고, SEO에도 불리한 조건을 지니고 있습니다. (불리한 이유를 간단하게 말씀드리면 HTML 소스에 검색 엔진이 인식할 만한 콘텐츠가 없습니다)
그래서 이를 해결하기 위해 서버에 미리 랜더링 시킨 HTML을 제공하거나, 빌드 시 정적 HTML로 만드는 SSG를 지원합니다.
✅ 파일 기반 라우팅
React Router를 따로 설치하고 설정할 필요 없이 디렉토리 구조만으로 자동으로 라우팅 구성합니다.
✅ 이미지 최적화, 코드 분할, SEO 대응 등
Next.js는 내부적으로 이미지 최적화, 코드 스플리팅, 자동 Lazy Loading 등을 지원합니다.
또한 메타 태그 삽입, 서버 렌더링을 통해 React보다 SEO 친화적인 환경을 제공할수 있습니다.
React는 클라이언트에서 렌더링을 시작하기 때문에, HTML 소스에 콘텐츠가 없기 때문에 검색 엔진이 인식하기 어렵습니다.
즉, Next.js는 개발자가 웹 서비스를 만들 때 겪는 여러 부담을 덜어주는 프레임워크입니다.
성능 최적화, SEO, 초기 로딩 속도와 같은 부분들을 자동으로 처리해 주기 때문에, 더 빠르게, 더 안정적으로 개발할 수 있는 환경을 제공해준다는것이 결론입니다.
📁 세팅
npx create-next-app@latest터미널에 이렇게 설치를 진행하면, 아래와 같은 설정의 문구가 나옵니다.
저는 다음과 같이 설정하였습니다.
| 질문 | 선택 |
|---|---|
| TypeScript 사용할까요? | ✅ Yes |
| ESLint 설정할까요? | ✅ Yes (기본 추천) |
| Tailwind CSS 추가할까요? | ✅ Yes |
| src/ 디렉토리 사용할까요? | ✅ Yes |
| App Router 사용할까요? | ✅ Yes (최신 방식) |
여기서 Ts, ESLint, Tailwind에 대한 답변은 왜 Yes인지 아시는 분이 많다고 생각을 해서 아래 두개 질문에 대한 추가 내용을 작성해볼게요.
src/ 디렉토리 사용 ( Yes 선택 이유)
✔️ 프로젝트의 루트가 깔끔해집니다.
✔️ 모듈화, 구조 관리에 더 좋습니다.
src/ 디렉토리 사용 (선택 ❌) (기본 구조)
my-app
├── app
├── components
└── styles
# src/ 디렉토리 사용 ( 선택 ✅ ) (src 디렉토리 사용)
my-app
├── src
│ ├── app
│ ├── components
│ └── styles
App Router 사용 ( Yes 선택 이유)
✔️ 프로젝트 확장성과 유지보수 좋다.
=> Pages Router 방식
pages/
├── index.tsx → "/"
├── about.tsx → "/about"
=> App Router 방식
app/
├── page.tsx → "/"
├── about/
│ └── page.tsx → "/about"
[ ➕ 추가 내용 ] 왜 Next.js는 Tailwind.css를 추천하고 있을까요?
위에 링크를 들어가시면 제가 작성한 프론트엔드 개발이 왜 Tailwind가 나오기까지의 과정을 정리해 놨습니다.
이 부분은 Tailwind에 대한 글이 아니기 때문에 간단하게만 정리를 해보겠습니다.
Tailwind의 특징
✔️ 간결한 코드에서 나오는 빠른 개발 속도
✔️ Css-in-Js보다 더 가벼운 번들 크기
✔️ 디자인 시스템 기반의 유연한 커스터마이징 가능
즉, Next.js + Tailwind.css를 통해 빠른 개발을 가능하게 해주는 시너지 조합이라고 생각합니다. 그래서 Next에서도 Tailwind를 적극 추천하는 모습을 볼수 있습니다.
👍 마무리
이번 글은 Next.js에서 정말 기본적인 부분들을 한번 다루고, 작성해봤습니다.
이론적인(?)글을 작성하면서 동시에 Next.js 프로젝트를 진행하려고 합니다.
그리고 성능과 측정과 최적화, SEO를 빨리 해보고싶네요.
