Next.js 에서 로딩 페이지 보여주는 방법

이전에 next.js 에서 로딩 페이지를 보여주기 위해서는 next/router 에서 제공하는 Router.events 를 사용해 1)라우팅 페이지를 감지하고 2) 페이지 전환이 발생할 때 상태 변경이 되면 3)로딩 페이지를 반환하는 형식 을 사용했습니다.

하지만 Next.js 13의 App Router에서는 loading.js 파일을 통해 특정 라우트 전환 시 로딩 화면을 보여줄 수 있습니다.

정말 그냥 파일 이름만 맞춰주면 자동으로 로딩 컴포넌트가 보여지는 것입니다. 대박 간편하죠 .. ?!!!

모든 페이지에 공통적으로 로딩 컴포넌트를 보여주고 싶을 경우

• 모든 페이지에 동일한 로딩 컴포넌트를 보여주고 싶다면 app 페이지 가장 최상단(root)에 loading.js 를 만들어주면 됩니다.

/app
  ├── layout.js        
  ├── loading.js       
  ├── page.js          
  ├── subpage          
      ├── page.js

특정 페이지로 전환할 때만 로딩 컴포넌트를 보여주고 싶은 경우

• 만약에 ‘로그인 페이지로 이동중입니다. 잠시만 기다려주세요’ 이런 문구를 활용해서 특정 페이지로 전환 할 때에만 로딩 컴포넌트를 보여주고 싶은경우, 해당하는 페이지 폴더에 loading.js 를 만들어주면 됩니다.

/app
  ├── layout.js        
  ├── loading.js       
  ├── page.js          
  ├── subpage          
      ├── page.js
      ├── loading.js

참쉽죠잉