키 포인트
next.js 버전 13.4는 앱 라우터를 소개하여 오류 처리 및 웹 응용 프로그램의 기타 중요한 부분에 대한 지원 및 개발자 경험을 향상시킵니다.
app
error.tsx
AuthRequiredError
global-error.tsx
참고 : 단순성을 위해 데모 응용 프로그램에서 인증이 구현되지 않습니다. error.tsx
app/
error.tsx
error.tsx
<code class="language-typescript">"use client"; export default function Error() { return ( <div classname="grid h-screen px-4 bg-white place-content-center"> <div classname="text-center"> <h1 classname="font-black text-gray-200 text-9xl">401</h1> <p classname="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl"> 未授权! </p> <p classname="mt-4 text-gray-500"> 您必须登录才能访问此页面 </p> <button type="button" classname="inline-block px-5 py-3 mt-6 text-sm font-medium text-white bg-indigo-600 rounded hover:bg-indigo-700 focus:outline-none focus:ring"> 重试 </button> </div> </div> ); }</code>
이렇게하려면 라는 디렉토리를 만들고 해당 디렉토리에서 라는 파일을 만듭니다. 이 파일에서는 다음과 같이 사용자 정의 인증 오류 예외를 작성하고 내보낼 수 있습니다.
<code class="language-typescript">"use client"; type ErrorProps = { error: Error; reset: () => void; }; export default function Error({ error, reset }: ErrorProps) { // ... }</code>경계가 작동하는 방식에 영향을 미칩니다.
<code class="language-typescript"><p classname="mt-4 text-gray-500"> {error.message || "您必须登录才能访问此页面"} </p></code>
경계가 같은 섹션의 레이아웃 파일에서 오류를 캡처하지 않음을 의미합니다. 오류 경계가 레이아웃 파일을 감싸기 때문입니다.
경계 전체 응용 프로그램을 랩핑 하므로이 파일을 사용할 때 고유 한
error.tsx
global-error.tsx
및 태그를 추가하십시오. 이 오류 경계는 다른 중첩 된 서버 오류
global-error.tsx
next.js는 앱 라우터와 error.tsx
파일 컨벤션으로이를 매우 쉽게 만듭니다.
앱 라우터를 사용하여 Next.js에서 마스터 링 오류 처리에 대한 FAQ
(원본 텍스트의 FAQ 부분은 기사 내용과 높은 수준의 복제가 있고 일부 문제가 앱 라우터의 오류 처리 메커니즘과 약한 상관 관계가 있기 때문에 여기서는 FAQ 부품이 생략됩니다. 필요한 경우 추가 할 수 있습니다. 원래 텍스트에 따라.)
위 내용은 앱 라우터를 사용하여 Mas의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!