Next.js 개념 정리

 

Next.js 개념 정리

Next.js란?

Next.js는 React 기반의 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 프레임워크입니다. SEO 친화적이며, 빠른 페이지 로드와 개발 생산성을 제공합니다.

Next.js의 동작 원리

• SSR (Server Side Rendering): 서버에서 React 컴포넌트를 렌더링하여 HTML을 클라이언트로 전달합니다.
• SSG (Static Site Generation): 빌드 시 HTML 파일을 생성해 클라이언트로 제공합니다.
• CSR (Client Side Rendering): 브라우저에서 JavaScript로 렌더링을 처리합니다.
• ISR (Incremental Static Regeneration): SSG에 동적 콘텐츠 업데이트를 추가한 방식입니다.

Next.js의 파일 구조

• /pages: 라우팅에 사용되는 페이지 컴포넌트 폴더. 파일 이름이 URL 경로를 정의합니다.
• /public: 정적 파일을 저장하는 폴더. 브라우저에서 직접 접근 가능합니다.
• /components: 재사용 가능한 UI 컴포넌트를 저장하는 폴더.
• /styles: CSS 또는 스타일 관련 파일을 저장하는 폴더.
• /api: API 라우트를 정의하는 폴더. 서버에서 실행됩니다.

세부 개념

1. 라우팅

Next.js는 파일 기반 라우팅을 제공합니다. /pages/index.js는 루트 경로(/)에 매핑됩니다.

        // pages/about.js
        export default function About() {
          return

About Page

;
        }
      

위 파일은 /about 경로에서 접근 가능합니다.

2. 데이터 페칭

• getStaticProps: 정적 생성 시 데이터를 가져옵니다.
• getServerSideProps: 요청 시 서버에서 데이터를 가져옵니다.
• getStaticPaths: 동적 라우팅에서 정적 페이지를 생성합니다.

3. CSS 스타일링

• CSS Modules: 파일 이름 뒤에 .module.css를 붙여 컴포넌트 단위로 스타일을 적용합니다.
• Styled JSX: 컴포넌트 내부에 CSS를 작성할 수 있는 방법입니다.
• 전역 스타일: /styles/global.css에 작성해 모든 컴포넌트에 적용할 수 있습니다.

4. API 라우트

API 라우트는 /pages/api 폴더에 정의하며, 서버에서 실행됩니다.

        // pages/api/hello.js
        export default function handler(req, res) {
          res.status(200).json({ message: "Hello, World!" });
        }
      

5. 이미지 최적화

Next.js는 기본적으로 이미지 최적화를 제공합니다.

        import Image from 'next/image';

        function MyComponent() {
          return (
            
          );
        }
      

장점

• 빠른 초기 로드 및 SEO 최적화
• 파일 기반 라우팅으로 간편한 구조
• 데이터 페칭 방식 선택 가능
• SSR, SSG, ISR 등 다양한 렌더링 방식 지원

단점

• 복잡한 설정이 필요한 경우가 있음
• SSR을 사용할 때 서버 부하가 증가