NextJS의 애플리케이션 디렉토리에 로딩 표시기 또는 진행률 표시줄 만들기: 단계별 가이드

Question

저는 Pages Router를 사용한 첫 번째 버전인 NextJS 13을 사용하여 대규모 웹 애플리케이션을 개발했습니다.

웹사이트를 거의 모두 완성한 후 Application Directory로 성공적으로 마이그레이션했습니다.

이 마이그레이션은 본질적으로 일부 새로운 라우팅 기능을 업그레이드하는 것이 아니지만 더 나은 웹 사이트 로드 시간을 얻기 위해 _app.tsx로 가져온 대용량 SASS 컴파일 파일을 변경하고 싶습니다.

이 프로젝트에서는 로딩이 큰 문제였기 때문에 MUI를 사용하여 각 구성 요소의 스타일을 지정하기 시작했는데 이는 단지 CSS-in-JS 솔루션이었습니다.

하지만 새 앱 디렉토리에서 발견한 문제는 라우터 이벤트입니다. next-n-progress 패키지의 진행률 표시줄 표시기가 있지만 이제 작동하지 않습니다. 사용자가 링크를 클릭하면 앱에 Take가 필요합니다. 다음 페이지를 로드하는 데 시간이 좀 걸립니다.

각 페이지의 루트에 loading.tsx 파일을 배치했기 때문에 이 문제는 SSR 페이지의 문제가 아니지만, 클라이언트 구성이 있는 페이지의 경우에는 여전히 문제가 존재합니다.

홈페이지, 로그인, 회원가입 등

새 애플리케이션 디렉토리를 지원하는 다른 진행률 표시줄 패키지를 시도했지만 전혀 표시되지 않았습니다.

레이아웃을 담당하는 구성요소는 다음과 같습니다. GitHub 구성 요소 영구 링크

이 새로운 NextJS 13 업데이트를 사용하여 새로운 진행률 표시줄을 만들 수 있는 방법이 있나요?

Answer 1

업데이트

저는 이것이 새로운 Next.js 13 앱 디렉토리의 일반적인 문제라는 것을 알았으며, 앱 라우터 동작에서 발생하는 여러 문제를 포함하여 이와 관련된 몇 가지 미해결 문제가 있습니다.

그래서 next-n-progress를 사용할 수 있었지만 진행률 표시줄을 표시하기 위해 로딩을 트리거하고 뷰포트에 있는 모든 링크에 대한 프리페치가 있기 때문에 링크 구성 요소를 사용해야만 작동한다는 것을 알았습니다. 의 이점.

그러므로 그동안 간단한 탐색의 경우에는 Router.push 대신 Link를 계속 사용하세요.