NextJS의 애플리케이션 디렉토리에 로딩 표시기 또는 진행률 표시줄 만들기: 단계별 가이드
저는 Pages Router를 사용한 첫 번째 버전인 NextJS 13을 사용하여 대규모 웹 애플리케이션을 개발했습니다.
웹사이트를 거의 모두 완성한 후 Application Directory로 성공적으로 마이그레이션했습니다.
이 마이그레이션은 본질적으로 일부 새로운 라우팅 기능을 업그레이드하는 것이 아니지만 더 나은 웹 사이트 로드 시간을 얻기 위해 _app.tsx로 가져온 대용량 SASS 컴파일 파일을 변경하고 싶습니다.
이 프로젝트에서는 로딩이 큰 문제였기 때문에 MUI를 사용하여 각 구성 요소의 스타일을 지정하기 시작했는데 이는 단지 CSS-in-JS 솔루션이었습니다.
하지만 새 앱 디렉토리에서 발견한 문제는 라우터 이벤트입니다. next-n-progress 패키지의 진행률 표시줄 표시기가 있지만 이제 작동하지 않습니다. 사용자가 링크를 클릭하면 앱에 Take가 필요합니다. 다음 페이지를 로드하는 데 시간이 좀 걸립니다.
각 페이지의 루트에 loading.tsx 파일을 배치했기 때문에 이 문제는 SSR 페이지의 문제가 아니지만, 클라이언트 구성이 있는 페이지의 경우에는 여전히 문제가 존재합니다.
홈페이지, 로그인, 회원가입 등
새 애플리케이션 디렉토리를 지원하는 다른 진행률 표시줄 패키지를 시도했지만 전혀 표시되지 않았습니다.
레이아웃을 담당하는 구성요소는 다음과 같습니다. GitHub 구성 요소 영구 링크
이 새로운 NextJS 13 업데이트를 사용하여 새로운 진행률 표시줄을 만들 수 있는 방법이 있나요?
