[NEXT.JS] 주요 기능 및 사용 가이드

소개

Next.js는 React 애플리케이션을 위한 프레임워크로, 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 성능과 SEO 최적화를 돕는다.

 

 

주요 기능

• 서버사이드 렌더링 (SSR): 페이지 로딩 속도와 SEO를 개선합니다.
• 정적 사이트 생성 (SSG): 빌드 시 HTML 파일을 생성해 빠른 로딩 속도를 제공합니다.
• API 라우팅: API 엔드포인트를 쉽게 생성할 수 있습니다.
• 자동 코드 분할: 필요할 때만 자바스크립트를 로드하여 성능을 향상시킵니다.

 

설치 및 기본 사용법

npx create-next-app@latest my-next-app cd my-next-app npm run dev

페이지 생성: pages 폴더에 파일을 추가하면 자동으로 라우팅됩니다.

 

// pages/index.js 

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

 

 

 

서버사이드 렌더링(SSR)

getServerSideProps: 각 요청 시 데이터 패칭

export async function getServerSideProps() { 
	const res = await fetch('https://api.example.com/data'); 
	const data = await res.json(); 
    return { props: { data } }; 
}

 

 

 

정적 사이트 생성(SSG)

getStaticProps: 빌드 시 데이터 패칭

export async function getStaticProps() { 
	const res = await fetch('https://api.example.com/data'); 
    const data = await res.json(); 
	return { props: { data } }; 
}

 

 

API 라우팅

API 라우트 생성(hello.js)

export default function handler(req, res) { 
	res.status(200).json({ message: 'Hello from Next.js API!' }); 
}