Next.js 면접에서 자주 나오는 질문

Next.js는 React 기반의 풀스택 프레임워크로, 최근 많은 회사에서 도입하고 있어요. SSR, SSG 같은 고급 기능들 때문에 면접에서도 자주 다뤄지는 주제입니다. 실무에서 정말 중요한 Next.js 개념들을 정리해봤어요.

Next.js 기본 개념

1. Next.js가 무엇이고 왜 사용하나요? React를 기반으로 한 풀스택 웹 프레임워크예요. 서버사이드 렌더링, 정적 사이트 생성, API 라우트, 파일 기반 라우팅 등을 제공해요. 마치 React라는 기본 재료에 여러 가지 편리한 도구들을 미리 준비해둔 요리 세트와 같아요.

2. SSR과 CSR의 차이점은? CSR(Client-Side Rendering)은 브라우저에서 JavaScript로 화면을 그리는 방식이고, SSR(Server-Side Rendering)은 서버에서 미리 HTML을 만들어서 보내주는 방식이에요. SSR은 초기 로딩이 빠르고 SEO에 좋지만, 서버 부담이 커요.

3. SSG(Static Site Generation)는 무엇인가요? 빌드 시점에 정적 HTML 파일을 미리 생성하는 방식이에요. CDN에서 바로 서빙할 수 있어서 가장 빠르지만, 동적인 데이터 처리에는 한계가 있어요. 블로그나 마케팅 페이지에 적합해요.

4. ISR(Incremental Static Regeneration)은 어떤 기능인가요? 정적 페이지를 필요할 때마다 다시 생성하는 기능이에요. 설정한 시간이 지나면 백그라운드에서 새로운 버전을 생성해요. 정적 사이트의 속도와 동적 사이트의 유연성을 모두 얻을 수 있어요.

라우팅과 데이터 페칭

5. Next.js의 파일 기반 라우팅은 어떻게 동작하나요? pages 폴더 구조가 그대로 URL이 되는 방식이에요. pages/about.js는 /about 경로가 되고, pages/blog/[id].js는 /blog/123 같은 동적 경로가 돼요. 별도의 라우터 설정 없이도 직관적으로 라우팅을 만들 수 있어요.

6. getStaticProps와 getServerSideProps의 차이는? getStaticProps는 빌드 시점에 데이터를 가져와서 정적 페이지를 생성하고, getServerSideProps는 요청할 때마다 서버에서 데이터를 가져와요. 데이터 변경 빈도에 따라 선택하면 됩니다.

7. getStaticPaths는 언제 사용하나요? 동적 라우트에서 SSG를 사용할 때 필요해요. 어떤 경로들을 미리 생성할지 정의해줍니다. 블로그 포스트 같은 경우 모든 포스트 ID를 미리 정의해서 해당 페이지들을 빌드 시점에 생성할 수 있어요.

8. API Routes는 어떻게 활용하나요? pages/api 폴더에 파일을 만들면 백엔드 API 엔드포인트가 되는 기능이에요. 간단한 API 서버를 별도로 구축하지 않고도 풀스택 애플리케이션을 만들 수 있어요.

성능 최적화

9. Next.js의 이미지 최적화는 어떻게 동작하나요? next/image 컴포넌트를 사용하면 자동으로 WebP 변환, lazy loading, 반응형 이미지 등을 처리해줘요. 디바이스에 맞는 크기로 자동 리사이징도 해주어서 성능이 크게 향상됩니다.

10. Code Splitting은 어떻게 이뤄지나요? 페이지별로 자동으로 코드를 분할해요. 사용자가 방문하는 페이지의 코드만 로드되기 때문에 초기 번들 크기가 작아져요. dynamic import를 사용하면 컴포넌트 레벨에서도 분할할 수 있어요.

11. 프리렌더링의 장점은 무엇인가요? 검색엔진이 페이지 내용을 쉽게 인덱싱할 수 있고, 초기 페이지 로드가 빨라져요. 사용자가 빈 화면을 보는 시간이 줄어들어서 사용자 경험이 개선됩니다.

Next.js는 React 생태계에서 점점 더 중요해지고 있는 기술이에요. 이런 개념들을 실제 프로젝트에 어떻게 적용했는지, 성능 개선 효과는 어땠는지까지 이야기할 수 있다면 면접에서 큰 도움이 될 거예요.