지난번 팀 프로젝트에서 CORS 오류를 겪었는데, Next.js를 사용하면 해결할 수 있다고 한다.
Next.js 프레임워크를 사용해보자!
1. Next.js 소개
Next.js는 다음을 충족하는 고품질 웹사이트를 만들 수 있게 해준다.
1. 성능
- 서버 사이드 렌더링(SSR), 정적 사이트 생성(Static Site Generation, SSG) 기능을 제공해 초기 로드 시간을 단축함.
- 코드 스플리팅 및 이미지 최적화와 같은 기능을 통해 런타임 성능을 향상시킴.
2. SEO (Search Engine Optimization)
- 서버 사이드 렌더링(SSR)을 통해 웹페이지의 콘텐츠가 초기 로드 시 완전히 렌더링되므로, 검색 엔진이 콘텐츠를 쉽게 인덱싱할 수 있음.
- 정적 사이트 생성으로 미리 생성된 HTML 파일을 제공하여 SEO 성능을 극대화함.
3. 개발자 경험
- 자동 코드 분할 (Automatic Code Splitting), 핫 리로딩 (Hot Reloading), 타입스크립트 지원 등 개발자가 생산성을 높일 수 있는 다양한 기능을 지원함.
- API 라우트 기능으로 백엔드와의 통합을 쉽게 하고, 환경 설정이 적은(configuration-less) 개발 환경을 제공함.
4. 확장성 (Scalability)
- 서버리스 함수와 데이터 페칭 기능을 활용해 유연한 확장성을 제공함.
5. 유연성 (Flexibility)
- React와 완전히 호환되며, 원하는 다양한 툴 및 라이브러리와 함께 사용할 수 있음.
Next.js는 프레임워크로서 UI를 만들기 위한 라이브러리인 React의 다양한 기능을 확장해 웹 애플리케이션 개발에 필요한 다양한 기능과 구조를 제공한다.
2. Next.js 사용 이유
1. 환경 설정이 적은 (configuration-less) 개발 환경
- 웹개발에 필요로 하는 거의 모든 기능을 디폴트로 가지고 있음
2. 유용한 기법 제공
대표적인 2가지를 소개하자면
- 렌더링 방식 : SPA(Single Page Application) 라이브러리에서 사용하던 CSR(Client Side Rendering)을 포함해 SSR(Server Side Rendering), ISR(Incremental Static Regeneration), SSG(Static Site Generation)을 가능하게 함.
- 코드 스플리팅
- 각 컴포넌트를 별도 JS 번들로 분리해 필요한 부분만 로드하도록 보장함.
- 따라서 TTV(Time To View)가 향상되고, 특정 페이지에 오류가 있어도 나머지 부분은 작동함.
3. 쉬운 서버 로직 개발
- API Route, server action 등을 지원해 아주 가벼운 서버 개발이 가능함. (복잡한 백엔드 로직은 불가능)
4. 매우 쉬운 배포
- Next.js는 Vercel에서 만든 만큼 배포가 굉장히 쉬움.
3. App Router vs. Pages Router
Next.js는 12버전까지 사용되던 Pages Router 방식과 13버전부터 도입된 App Router 방식으로 라우팅 방식으로 나뉜다.
웹사이트를 기획/설계할 때, 어떤 페이지가 존재할지, 라우팅은 어떻게 할지를 항상 먼저 고려하므로, 라우팅은 FE에서 아주 중요한 사항이다.
Pages Router는 `pages` 폴더에 원하는 페이지의 파일 이름을 두고, App Router는 원하는 페이지의 이름으로 된 폴더 아래에 `pages.tsx` 파일을 둔다. 즉 App Router는 폴더명을 기반으로 라우팅이 된다.
나는 App Router 방식으로 진행할 것이다.
4. Next.js 시작하기
npx create-next-app@latest
터미널에 위 코드를 입력해 설치를 시작하자. 나는 아래와 같이 설정하고 진행하려고 한다.
그러면 이전에 React+Vite에서 하던 것처럼 아래를 입력하고 시작하면 된다.
// yarn
yarn
yarn dev
// npm
npm install
npm run dev
5. 파일(폴더) 기반 라우팅
URL 관련 용어를 빠르게 살펴보고 넘어가자. 티스토리 글쓰기의 URL을 일부 가져와서 살펴보자.
joycie416.tistory.com/manage/newpost
여기서 맨 앞 `joycie416.tistory.com`을 domain이라고 하고 `manage`, `newpost`를 URL segment라 한다. 도메인을 제외한 부분(`/manage/newpost`)을 URL path 또는 pathname이라고 한다.
App Router 방식을 선택했으므로 우리는 앞으로 `../app/manage/page.tsx`와 `../app/manage/newpost/page.tsx`와 같은 파일을 사용하게 될 것이다.
Dynamic 라우팅의 경우, `react-router-dom`을 사용했을 때를 떠올려보면 아래와 같이 작성했다.
...
<Route path='/post/:id' element={<Post />}/>
...
Next.js에서는 `../post/[id]/page.tsx`라고 작성하고 `http://localhost:3000/post/1`을 통해 들어가면 위와 같은 페이지일 것이다.
위 사진과 같은 경우 ` http://localhost:3000/about`, ` http://localhost:3000/contact`, ` http://localhost:3000/post/1` 등의 페이지를 볼 수 있다.
여기까지가 Next.js 첫시작을 위한 포스팅이다! 꽤 정리했다고 생각했는데, 양이 너무 적다ㅜ 강의를 들어보니 너무 복잡한데 차근차근 정리해봐야겠다.