Next.js App Directory로 SSR과 CSR을 한 번에!
KUKJIN LEE • 4개월 전 작성
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>;
}
![[GPT] PMP 시험 대비: 프로젝트 관리 핵심 주제 요약 및 예상 문제](/_next/image?url=https%3A%2F%2Fd2gg9iclns4v4e.cloudfront.net%2Fimages%2Fnews%2F1726027822117_pmp%20book.webp&w=256&q=75)
