서론
웹 개발은 그 자체로 빠르게 변화하는 영역이다. 새로운 프레임워크와 라이브러리가 속속 등장하며, 개발자들은 이 중에서 최적의 도구를 선택해야 하는 과제에 직면하게 된다. 이번 포스팅에서는 최근 많은 주목을 받고 있는 Next.js에 대해 이야기해보고, 초기 프로젝트 구축을 해보려 한다. Next.js는 Vercel에 의해 만들어진 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(Static Site Generation, SSG), 그리고 최근에는 Incremental Static Regeneration(ISR) 같은 고급 기능을 제공한다.
프론트엔드와 백엔드의 경계가 점차 모호해지는 현재, 한쪽 영역에만 국한되어 개발하는 것이 시대에 뒤떨어진다는 생각이 들었다. 이에 따라, 백엔드 개발자인 나는 프론트엔드 프레임워크인 Next.js를 공부하기로 결정다. 내가 가진 주관적인 견해는 추후에 자세히 다루도록 하고, 본 포스팅은 Next.js를 사용하여 진행하는 토이 프로젝트를 연재하는 첫 번째 글로 시작한다.
Next.js의 강점
1. 간편한 SSR 및 SSG 지원
Next.js는 SSR과 SSG를 쉽게 구현할 수 있게 해주어, 사용자 경험(UX)과 검색 엔진 최적화(SEO)를 크게 향상시켜준다. SSR은 사용자에게 콘텐츠를 더 빠르게 제공하는 반면, SSG는 서버의 부하를 줄이고 빠른 로딩 시간을 보장한다.
2. 파일 기반 라우팅
파일과 폴더 구조를 기반으로 자동으로 라우팅을 설정한다. 이는 별도의 라우팅 설정 없이도 페이지를 생성하고 관리할 수 있다는 의미로, 개발 속도를 상당히 높여준다.
3. API 라우트를 통한 백엔드 기능
Next.js는 API 라우트를 통해 서버리스 함수를 쉽게 구현할 수 있다. 이를 통해 백엔드 로직을 프론트엔드와 같은 프로젝트 내에서 관리할 수 있어, 전체적인 개발 흐름이 매끄러워진다.
4. 최적화된 성능
Next.js는 자동으로 코드 분할을 수행하며, 필요한 자원만 로드한다. 이는 페이지 로드 시간을 최소화하고 성능을 향상시킨다.
5. 풍부한 플러그인 생태계 및 커뮤니티
Vercel 및 여러 기업과 개발자의 지원을 받으며, 다양한 플러그인과 활발한 커뮤니티를 갖추고 있다. 이는 개발 중 발생할 수 있는 문제를 해결하는 데 큰 도움이 된다.
Next.js의 약점
1. 복잡한 설정과 커스터마이징
Next.js는 많은 기능을 '상자 밖'에서 바로 사용할 수 있게 제공하지만, 프로젝트의 복잡성이 증가할 때 맞춤 설정이 필요하다. 때로 이것은 상당한 시간과 노력을 요구할 수 있다.
2. 학습 곡선
React 자체에 익숙하지 않은 경우, Next.js의 고급 기능을 이해하고 사용하기까지의 학습 곡선이 가팔라질 수 있다.
3. 서버 사이드 렌더링의 부하
SSR은 성능 이점을 가져다주기도 하지만, 서버에 부하를 줄 수 있다. 특히 고트래픽 사이트에서는 이 부분을 주의 깊게 고려해야 한다.
4. 배포 복잡성
SSR이나 SSG를 사용하는 Next.js 애플리케이션은 정적 파일을 호스팅하는 것보다 배포가 더 복잡할 수 있다. Vercel 같은 플랫폼이 이를 간소화해주긴 하지만, 기존의 서버 설정과는 다른 접근이 필요하다.
Next.js 프로젝트 시작하기
필요 조건
Next.js를 시작하기 전에 노드(Node.js)와 npm(또는 Yarn)이 설치되어 있어야 한다. 이것은 Next.js 및 다양한 JavaScript 패키지를 실행하는 데 필요한 환경을 제공한다.
1. 프로젝트 생성
프로젝트를 시작하는 가장 간단한 방법은 create-next-app을 사용하는 것이다. 이는 필요한 모든 구성 파일과 디렉토리를 자동으로 생성해준다.
// node 13 이후부터는 page route 방식에서 app route방식으로 업데이트 된다.
// 때문에 프로젝트 이름부터 src 폴더 사용유무 등등을 설정하는 콘솔 내용을 입맛에 맞게 기입하면 된다.
npx create-next-app@latest
✔ What is your project named? … mg-next
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/mingyukim/Desktop/tisyory/mg-next.나는 mg-next를 프로젝트의 이름으로 설정하겠다.
2. 프로젝트 디렉토리로 이동
생성한 프로젝트 폴더로 이동한다.
cd mg-next
3. 개발 서버 실행
다음 명령어를 통해 개발 서버를 시작한다.
npm run dev
또는 만약 Yarn을 사용한다면
yarn dev
이 명령어는 localhost:3000에서 서버를 시작하며, 이제 웹 브라우저를 통해 해당 주소에 접속하면 Next.js 애플리케이션이 실행되는 것을 볼 수 있다. 만약 3000포트가 사용중이라면 3001,3002 등으로 자동 설정된다.
4. 페이지 추가 및 수정
next.js 버전에 따라 app 또는 pages 디렉토리 안에는 각각의 파일이 라우트로서 작동한다. pages 폴더가 있는 next13미만 버전에서는 index.js는 웹사이트의 홈페이지(/)에 해당한다. app 폴더가 있는 next13이후 버전에서는 page.js 파일이 웹사이트 홈페이지(/)에 해당한다. 이 파일을 수정하여 홈페이지의 내용을 변경할 수 있다.
새로운 페이지를 만들고 싶다면, app route 기반의 경우 새로운 폴더를, page route 기반의 경우 pages 디렉토리 안에 새로운 파일을 생성하면 된다. 예를 들어, page route기반에서는 about.js를 생성하면, localhost:3000/about을 통해 접근할 수 있는 새로운 라우트가 만들어진다. app route 기반에서는 app/about/page.js 를 생성하면 localhost:3000/about을 통해 접근할 수 있는 새로운 라우트가 만들어진다.
5. 컴포넌트 추가 및 스타일링
Next.js는 React 기반으로, React 컴포넌트를 사용하여 UI를 구성한다. components 디렉토리를 만들어 재사용 가능한 컴포넌트들을 관리할 수 있습니다.
CSS 모듈을 사용하여 컴포넌트별로 스타일을 지정할 수 있으며, page route기반에서 글로벌 스타일은 pages/_app.js 파일에서 설정할 수 있다.
6. 배포
개발이 완료되었다면, 배포를 위해 프로젝트를 빌드한다.
npm run build
또는 Yarn을 사용하는 경우
yarn build
빌드가 완료되면, start 스크립트를 사용하여 프로덕션 서버를 시작한다.
npm run start
또는
yarn start이제 프로젝트의 프러덕션 준비가 되었다. Vercel, Netlify, AWS, Firebase 등 여러 클라우드 플랫폼을 통해 쉽게 배포할 수 있다.
결론
Next.js는 강력한 기능과 편의성을 제공하는 프레임워크지만, 모든 프로젝트에 완벽하게 적합한 것은 아니라고 생각한다. 어떤 언어나 프레임워크던 간에 개발하는 프로젝트의 요구 사항, 개발 팀의 기술 스택, 그리고 유지 보수의 복잡성 등을 고려해서 선택해야 한다. 하지만 최신 웹 표준을 따르고, 사용자와 검색 엔진 모두에게 최적화된 경험을 제공하고자 한다면 Next.js는 분명 강력한 후보가 될 것같다.
개발의 세계는 늘 균형과 선택의 문제다. Next.js는 현대 웹 개발의 트렌드에 맞는 강력한 해결책을 제시하지만, 그것이 반드시 모든 상황에 최선인 것은 아니겠지.. 결국 개발자의 판단과 프로젝트의 목적이 Next.js를 선택하는 가장 중요한 기준이 될 것이고, 나는 Next.js를 학습하여 하나의 토이 프로젝트를 개발할 것이다.