Next.js App Directory로 SSR과 CSR을 한 번에!

KUKJIN LEE • 9개월 전 작성

Next.js App Directory

Next.js는 React 애플리케이션을 위한 인기 있는 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 쉽게 구현할 수 있도록 도와줍니다. Next.js를 사용하면 빠르고 SEO 친화적인 웹 애플리케이션을 개발할 수 있습니다.

1. Next.js란?

Next.js는 React 기반의 프레임워크로, Vercel에서 개발 및 유지보수하고 있습니다. 이 프레임워크는 서버 사이드 렌더링과 정적 사이트 생성을 지원하여 웹 애플리케이션의 성능과 SEO를 개선합니다.

2. 주요 기능

서버 사이드 렌더링 (SSR): 클라이언트 측에서 데이터를 렌더링하기 전에 서버에서 페이지를 생성하여 초기 로드 시간을 단축합니다.
정적 사이트 생성 (SSG): 빌드 시점에 HTML을 생성하여 정적 파일로 배포합니다. 빠른 로드 시간과 뛰어난 성능을 제공합니다.
API 라우팅: 내장 API 라우트를 통해 백엔드 서버 없이도 API를 쉽게 구축할 수 있습니다.
이미지 최적화: 자동으로 이미지 크기를 조정하고, 형식을 변환하여 페이지 로드 속도를 향상시킵니다.
CSS 및 Sass 지원: CSS 모듈과 Sass를 기본적으로 지원하여 스타일링을 더욱 간편하게 할 수 있습니다.
App Directory: Next.js 13에서 도입된 새로운 구조로, 더 나은 파일 및 폴더 관리를 제공합니다.

3. Next.js 시작하기

Next.js 프로젝트를 시작하는 것은 매우 간단합니다. 아래의 명령어를 통해 새로운 Next.js 애플리케이션을 생성할 수 있습니다.

npx create-next-app my-next-app

cd my-next-app

npm run dev

로컬 서버에서 Next.js 애플리케이션이 실행됩니다. 브라우저에서 http://localhost:3000을 열어 확인할 수 있습니다.

4. App Directory와 라우팅

Next.js 13부터는 app 디렉토리를 사용하여 더 강력하고 유연한 라우팅을 설정할 수 있습니다. app 디렉토리에 파일을 추가하면 자동으로 해당 경로가 생성됩니다.

// app/page.js
export default function Home() {
    return <h1>Welcome to Next.js App Directory!</h1>;
}

5. 데이터 패칭

Next.js는 다양한 데이터 패칭 방법을 제공합니다. getStaticProps, getServerSideProps, getStaticPaths와 같은 전통적인 방법 외에도 app 디렉토리에서 서버 컴포넌트를 활용하여 데이터를 가져올 수 있습니다.

6. 레이아웃과 중첩된 라우팅

App Directory는 중첩된 레이아웃과 라우팅을 더 쉽게 관리할 수 있게 해줍니다. layout.js 파일을 사용하여 공통 레이아웃을 정의할 수 있습니다.

// app/layout.js
export default function RootLayout({ children }) {
    return (
        <html>
            <body>
                <nav>Navigation Bar</nav>
                <main>{children}</main>
            </body>
        </html>
    );
}

// app/page.js
export default function Home() {
    return <h1>Welcome to the Home Page</h1>;
}

// app/about/page.js
export default function About() {
    return <h1>About Us</h1>;
}

Our Channels