Next.js - 설치 및 기본 동작 1편

 

 

 

 

Next.js를 실무에 사용하기 위하여 유튜브에서 Crash Course 영상을 토대로 작성하였다.

프론트 진영에서 트랜드가 빨라서 새로은 또 무엇인가를 공부해야하는 걱정이였으나 그나마 다행히 Next.js는 React를 바탕으로 만들어진 웹 front-end 프레임워크라 그런지 생각보다 할만하다는 생각이 들었다.

프레임워크라 react에서 부족하거나 일일이 해야했던 작업들을 편하게 해주기도 하였다. 왜 Next.js가 핫한지 체감이 되는 강의였다. 
https://www.youtube.com/watch?v=Y6KDk5iyrYE 

 

Next.js 프로젝트 설치

$ npx create-next-app next-crash

 

automatic routing

기존의 next.js에서는 automatic routing을 사용할 때, pages 디렉토리 안에 파일을 생성하여 별도의 라우터 없이도 애플리케이션 내부에서 즉시 경로를 생성할 수 있었다.

 

하지만 Next.js 13버전 부터는 app/이라는 새로운 디렉토리가 등장하여 라우팅 및 레이아웃 기능을 개선하였다.

 

기존 버전과 마찬가지로 폴더명이 라우팅이 되는 방식이다. 그리고 page.js 또는 page.jsx라는 단일 파일을 생성해야만 한다.

 

 

위와 같이 폴더구조를 구성하면 /about 라우트와 /about/team 이라는 중첩된 라우트가 만들어진다. 

 

동적 라우트는 대괄호[]를 이용하여 폴더명을 생성하면 된다. 가령 [name]이라고 폴더명을 만들었다면, 

params.name으로 해당 값을 불러올 수 있다.

 

 

metadata API

app폴더 안에서 layout.js 파일 안에 metadata 객체로 글로벌 메타태그를 설정할 수 있다.

 

페이지마다 새로운 메타태그를 먹일 수도 있다.

 

 

streaming

app 디렉토리에서 loading.js라는 파일을 생성하여 사용자가 랜더링이 되기 이전에 로딩중인 화면을 표시할 수 있는 기능이다.

 

추가로 모든 데이터를 불러오기 전에 loading.js파일을 이용하여 기다리게 하는 것 보다 오래 걸리는 부분만 react의 Suspense boundaries로 묶어서 사용하면 훨씬 더 낳은 사용자 경험을 제공해 줄 수 있다.

 

 

data fetching

// This request should be cached until manually invalidated.
// Similar to `getStaticProps`.
// `force-cache` is the default and can be omitted.
fetch(URL, { cache: 'force-cache' });

// This request should be refetched on every request.
// Similar to `getServerSideProps`.
fetch(URL, { cache: 'no-store' });

// This request should be cached with a lifetime of 10 seconds.
// Similar to `getStaticProps` with the `revalidate` option.
fetch(URL, { next: { revalidate: 10 } });

다음과 같이 fetch 에 3가지 옵션이 도입됐다.

• { cache: 'force-cache' } : build시에 가져온 데이터가 사용되고 직접 revalidate하기 전까지는 데이터가 캐싱되는 방식. getStaticProps와 같다. 그리고 이 옵션은 fetch 의 default 옵션.
• { cache: 'no-store' } :  서버 단에서 매 요청시마다 새로 fetch하게 된다.  getServerSideProps와 유사하다.
• { next: { revalidate: 10 } } : next 옵션을 줌으로서, cache 돼고있는 data 들을 revalidate 시킬 수 있다. 값은 초 단위를 의미하며, 위 예시에서는 10을 줬으니 10초마다 캐시가 지워질 것이고 새롭게 갱신된 데이터로 새로 캐싱된다.

 

 

 

---

다음 장에서는 Next.js 기본 동작2편을 유튜브 영상을 바탕으로 간단한 사용법을 알아볼 것입니다 😀

잘못된 부분이나 보완할 점이 있으면 댓글 달아주시면 감사하겠습니다. 😉

 

 

 

Next.js 13이 나와버렸다

 

[React🌀] Next JS 13 업데이트 사항 총 정리 📄