[ NextJS ] 버전 별 특징(13 이전, 13, 14)

Intro

2022.10.25 Next 13 출시
2023.10.26 Next 14 출시

Vercel에서 1년을 주기로 Next 13과 Next 14버전을 출시하였습니다.

버전 업데이트가 되면서 구성 방식에 많은 변화가 생겼는데요.

주요 특징에 대해서 알아보고자 합니다.

---

1. Routing

Page Router -> App Router

13버전이 등장하며 가장 큰 변화가 생긴 부분 중 하나는 페이지 라우팅 방식입니다.

이전 버전까지는 pages/ 디렉토리에 파일들을 생성하며 페이지 구성을 해왔습니다.

13버전 부터는 app/ 디렉토리를 제공하며, 다음의 추가적인 기능들을 제공하여 라우팅 방식의 변화를 보여줍니다.

• Layout
• Server Component
• Streaming

---

next 13 이전 버전에서의 기본 구성 방식은 다음과 같습니다.

└── src/
    └── pages/
        ├── _app.tsx
        ├── _document.tsx
        └── index.tsx

└── src/
    ├── layouts/
    │   └── testLayout.tsx
    └── pages/
        ├── _app.tsx
        ├── _document.tsx
        ├── index.tsx
        └── test.tsx

└── src/
    ├── components/
    │   └── test/
    │       └── testHeader.tsx
    ├── layouts/
    │   └── testLayout.tsx
    └── pages/
        ├── _app.tsx
        ├── _documnet.tsx
        ├── index.tsx
        └── test.tsx

└── src/
    ├── components/
    │   └── ...
    ├── layouts/
    │   ├── aTestLayout.tsx
    │   ├── bTestLayout.tsx
    │   └── cTestLayout.tsx
    └── pages/
        ├── test/
        │   ├── aTest.tsx
        │   ├── bTest.tsx
        │   └── cTest.tsx
        ├── _app.tsx
        ├── _document.tsx
        └── index.tsx

next 13 버전 부터는 App Router를 사용한 방식으로 변경되었습니다.

└── src/
    └── app/
        ├── layout.tsx
        └── page.tsx

└── src/
    └── app/
        ├── test/
        │   ├── layout.tsx
        │   └── page.tsx
        ├── layout.tsx
        └── page.tsx

└── src/
    └── app/
        ├── test/
        │   ├── testHeader.tsx
        │   ├── layout.tsx
        │   └── page.tsx
        ├── layout.tsx
        └── page.tsx

└── src/
    └── app/
        └── test/
            ├── (aTest)/
            │   └── aTest/
            │       ├── layout.tsx
            │       └── page.tsx
            ├── (bTest)/
            │   ├── bTest/
            │   │   ├── layout.tsx
            │   │   └── page.tsx
            │   ├── cTest/
            │   │   ├── layout.tsx
            │   │   └── page.tsx
            │   └── layout.tsx
            ├── layout.tsx
            └── page.tsx

---

2. Data Fetching

getServerSideProps/getStaticProps -> async fetch/cache/next revalidate

13 이전 버전까지는 getServerSideProps / getStaticProps등을 정의하며 SSR과 SSG 렌더링 방식들을 활용하였습니다.

export const getServerSideProps = async() => {
 	try {
   		const response = await fetch("/api/test/server");
   
   		if(response.status === 200) {
     		const data = await response.json();
     			return {
       			  props: { data }
     			}
   		}
   
        return {props: {} };
    } catch (error) {
   		console.error(error);
   		return {props: {} };
 	}
}

export const getStaticProps = async () => {
  try {
    const response = await fetch("/api/test/static");

    if (response.status === 200) {
      const data = await response.json();
      return {
        props: { data },
      };
    }

    return { props: {} };
  } catch (error) {
    console.error(error);
    return { props: {} };
  }
};

13버전 부터는 fetch() API에 옵션을 적용하여 컴포넌트 단위에서도 SSR/SSG 렌더링 방식을 활용할 수 있게 되었습니다.

export const DataFetch = async() => {

  const staticDataFetch = await fetch('/api/test/static', { cache: 'force-cache' });

  const dynamicDataFetch = await fetch('/api/test/server', { cache: 'no-store' });
  
  const revalidateDataFetch = await fetch('/api/test/revalidate', { next: { revalidate: 100 } });
                                                                           
  
}

---

Conclusion

버전이 업데이트 되며 크게 변화된 내용들부터 간략하게 살펴봤습니다. 적용 학습을 해보며 구체적인 특징들을 파악 후, 추가적으로 포스팅하고자 합니다.

---

참고 문헌

• next 13 공식 블로그
• next 14 공식 블로그
• [Next] Next13의 새로운 기능 알아보기 (4) - Link
• 위시켓 - Next.js 14 살펴보기
• Next.js 13 업데이트 된 내용 정리 & App 라우터 자세히 알아보기