API Routes란?
-
API Routes는 Next.js에서 백엔드 로직을 작성하는 방법을 제공함. 이는 클라이언트와 서버 간의 통신을 단순화하고, 서버 사이드 렌더링 및 데이터 페치에 유용함.
-
API Routes를 사용하면 /api 디렉토리 내에서 API 엔드포인트를 생성할 수 있다. default로 클라이언트와 같은 origin을 갖는다.
-
body Parser 자동설정됨. => straem이나 raw-body로 받으려면 false로 처리해야함.
-
res에는 res.status(code) => 상태코드설정
-
res.json(body) : JSON RESPONSE로 보냄 , res.send(body) : HTTP RESPONSE로 보냄(string, object가능)
-
res.redirect([status,] path) => 클라이언트 리다이렉트시킴(status코드가 valid해야함)
-
res.revalidate(urlPath) => page 재검증
import type { NextApiRequest, NextApiResponse } from 'next'
type ResponseData = {
message: string
}
export default function handler(req: NextApiRequest, res: NextApiResponse) {
const method = req.method; // HTTP 요청 메서드
const query = req.query; // 쿼리 파라미터
const headers = req.headers; // 헤더 정보
const body = req.body; // 요청 바디 정보
const data = ....
// API 로직 처리 및 응답 생성
res.status(200).json(data);
} catch (error) {
// 오류 발생 시 응답 생성
res.status(500).json({ error: 'Internal server error' });
}
}
Internationalization (i18n) Routing
- 다국어 웹 어플리케이션을 위한 라우팅기능. 여러언어로 구성된 페이지를 쉽게 관리 할 수 있도록 지원함.
Authenticating(인증)
-
CSR, SSR을 모두 지원하므로 각각 다른 방식으로 인증을 다룸
-
CSR에서는 서버에서 JWT 토큰을 받아 쿠키에 저장함.
-
SSR방식에서는 초기 렌더링시에 사용자 인증상태를 서버에서 가져와야함.
-
SSG에서 인증정보가 필요한 경우에는 getStaticProps와 getServerSideProps 활용하여 인증여부를 확인하고 필요한 데이터를 가져옴.
getStaticProps, getServerSideProps?
-
Next.js에서 데이터를 사전 렌더링할 때 사용되는 메서드로, 각각 정적 생성(Static Generation) 페이지와 서버 사이드 렌더링(SSR) 페이지에서 데이터를 가져오는 데 사용됨.
-
이들 메서드를 사용하여 페이지를 사전 렌더링하면 초기 로딩 속도가 개선되고 SEO에 좋은 페이지를 제공할 수 있습니다.
-
이 두개의 메서드를 사용하는 궁극적인 이유는 SEO 최적화임. => 즉 모든 데이터를 미리 가져올 필요가 없다는 뜻임.(SEO에 관련된 데이터만 가져오는 형식!!!)
getStaticProps
-
page에서 getStaticProps으로 불리는 function을 export하면, Next.js는 build time에 페이지를 pre-rendering함.
-
정적 생성 페이지에서 사용되며, 빌드 시에 데이터를 미리 가져와 정적인 HTML 파일로 저장합니다. 이로써 사용자가 페이지에 접근할 때 서버에서 데이터를 가져오지 않아도 되므로 초기 로딩 속도가 항샹됨.
-
언제 사용해야하는가? => 정적인 페이지를 미리 생성해야할때, 고정적인 데이터일때 사용함. (빌드 이후 고정적으로 보여지는 데이터를 담기 때문에 동적인 데이터를 담을때는 적합하지 않음.)
-
클라이언트에서 작동하는게 아니라 서버에서 작동함. => 브라우저 번들에 포함되지 않기 때문에 server side 코드를 바로 사용 할 수 있음.
context란?
-
getStaticProps, getServerSideProps, getInitialProps)에서 제공되는 인자로, 페이지의 사전 렌더링 컨텍스트에 관련된 정보를 담고 있는 객체임.
-
이를 통해 현재 요청과 관련된 데이터를 사용하여 페이지 데이터를 동적으로 가져올 수 있음.
getStaticProps의 매개변수인 context의 객체 구성
params: 동적 경로를 사용하는 페이지에 대한 정보를 담는다. 동적 페이지의 파일명이 [id].js인 경우 context.params는 {id: ...}를 반환한다.
req: HTTP request object
res: HTTP response object
query: 쿼리 문자열
preview: preview mode 여부 (자세한 설명)
previewData: setPreviewData로 설정된 데이터
getStaticProps의 반환값
props(option) : 해당 컴포넌트로 반환할 값
revalidate(option) : 해당 페이지의 재생성 발생 가능 시간(sec). 기본 값은 false다. false일 경우 해당 페이지가 다음 빌드 때까지 빌드된 상태로 캐시된다.
notFound(option) : Boolean 값, 404 에러를 반환한다.
import { GetStaticProps } from 'next';
export const getStaticProps: GetStaticProps = async () => {
const data = await fetchData(); // 데이터 가져오기
return {
props: {
data,
},
revalidate: 3600, // 1시간마다 재생성
};
};
function MyPage({ data }) {
// 사용자 데이터를 렌더링
}
getServerSideProps
-
SSR방식, 페이지 요청시마다 실행됨. 동적으로 데이터를 가져와 업데이트가 가능함.
-
꼭 사용해야 할때 => 고정적인 정보는 getStaticProps로 가져오는게 성능상으로 이점이 좋음
-
request time에 무조건 data가 fetching되어야 할때 getServerSideProps을 사용해야함.
-
ex) authorization header, geo location...
-
요청시마다 getServerSidePRops가 실행됨. cache-control headers를 조정해야 캐싱이 됨.
-
request time에 꼭 가져와야 되는 정보가 아니라면, CSR방식이나 SSG방식 사용을 권장.
import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
type Repo = {
name: string
stargazers_count: number
}
export const getServerSideProps: GetServerSideProps<{
repo: Repo
}> = async () => {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const repo = await res.json()
return { props: { repo } }
}
export default function Page({
repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
return repo.stargazers_count
}getServerSideProps의 매개변수인 context의 객체 구성
params: 동적 경로를 사용하는 페이지에 대한 정보를 담는다. 동적 페이지의 파일명이 [id].js인 경우 context.params는 {id: ...}를 반환한다.
req: HTTP request object
res: HTTP response object
query: 쿼리 문자열
preview: preview mode 여부 (자세한 설명)
previewData: setPreviewData로 설정된 데이터
getServerSideProps의 반환값
props(option) : 해당 컴포넌트로 반환할 값
redirect(option) : 값 내부와 외부 리소스 리디렉션 허용한다.
{ destination: string, permanent: boolean }
notFound(option) : Boolean 값, 404 에러를 반환한다.
ref) https://velog.io/@nemo/getServerSideProps-getStaticProps
0개의 댓글
