앱 라우터를 사용하여 Mas-JS 튜토리얼-php.cn

~~next.js 13.4 앱 라우터에 대한 오류 처리 안내서~~

이 기사는 새로운 오류 파일 규칙을 사용하여 Next.js의 앱 라우터의 오류를 처리하는 방법을 설명합니다.

오류 처리는 웹 응용 프로그램 개발의 핵심 측면입니다. 과거에 Next.js는 404 및 500 페이지와 같은 오류 페이지를 사용자 정의하여 개발자가 오류를 처리하는 데 도움이되었습니다. 그러나이 페이지는 특정 UI 통합에 대한 제한된 지원, RECT 오류 경계에 대한 구식 지원 및 오류가 발생할 때 제한된 응용 프로그램 기능과 같은 페이지 라우터에 제한 사항이 있습니다.

Next.js 버전 13.4가 출시 된 후 새로운 앱 라우터가 공식적으로 제작되었습니다. 앱 라우터는 오류 처리 및 웹 애플리케이션 빌딩의 기타 기본 부분에 대한 지원 및 개발자 경험을 향상시킵니다.

키 포인트

~~next.js 버전 13.4는 앱 라우터를 소개하여 오류 처리 및 웹 응용 프로그램의 기타 중요한 부분에 대한 지원 및 개발자 경험을 향상시킵니다.~~

디렉토리의

파일은 오류가 발생할 때 응용 프로그램이 충돌하지 않도록 반응 오류 경계를 만듭니다. 또한 폴백 구성 요소 역할을 할 수 있으며, 경계 내에서 오류가 발생하면 렌더링 할 수 있습니다.

응용 프로그램의 여러 경로에서 오류 메시지를 추상화하기 위해 사용자 정의 예외를 만들 수 있습니다. 예를 들어, 다양한 경로에서 인증 오류를 처리하기 위해 사용자 정의

오류는 다음.js 응용 프로그램의 어느 곳에서나 발생할 수 있습니다. 그들은 가장 가까운 상위 오류 경계로 거품됩니다. 루트 레이아웃 또는 템플릿 오류의 경우 파일을 사용해야합니다. 서버 구성 요소에서 또는 데이터 수집 중에 오류가 발생하는 경우 다음 .js는 해당 오류 객체를 가장 가까운
app 장면과 설정 새로운 오류 처리 API에 대한 이해를 용이하게하기 위해 API를 구현할 것입니다. error.tsx 사용자 인증에는 많은 오류가 발생하기 쉬우므로 다른 응용 프로그램을 구축 할 때는이 상황에서 오류를 처리하는 방법을 배우는 것이 큰 도움이 될 것입니다.

시작하기 전에 여기에 연결된 저장소 (메인 브랜치)를 복제 하여이 기사에서 사용할 데모 응용 프로그램 코드를 받으십시오. 응용 프로그램을 실행 한 후 아래 이미지에 표시된 오류가 표시됩니다.

AuthRequiredError

이 데모 애플리케이션에서 메인 페이지 (양식 표시)는 로그인 한 사용자 만 액세스 할 수 있지만 일부 오류가 발생했습니다 (이 경우에는 인공적이지만 합법적으로 발생할 수 있음). 세션이 발생합니다. null에 할당 할 변수.

global-error.tsx 참고 : 단순성을 위해 데모 응용 프로그램에서 인증이 구현되지 않습니다. error.tsx 이것은 물론 오류로 이어지고 이제는 오류를 처리하는 방법을 모르기 때문에 응용 프로그램이 완전히 충돌합니다!

이제 응용 프로그램이 충돌하지 않도록이 오류를 처리하는 방법을 배워 응용 프로그램의 사용자 경험이 크게 향상됩니다.

오류 페이지를 만듭니다 디렉토리에서 애플리케이션이 충돌하지 않도록 파일을 만듭니다. 이 파일 생성은 자동으로 기본 페이지를 감싸는 React 오류 경계를 만듭니다. 그런 다음 파일에서 다음 함수를 내보내십시오 :

참고 : 오류 구성 요소는 클라이언트 구성 요소 여야합니다! 클라이언트 구성 요소로 표시하십시오.

내보내기 함수는 폴백 구성 요소 역할을합니다. 경계 내에서 오류가 발생하면 오류가 잡히고 폴백 구성 요소가 렌더링되며 아래에서는 모양이 표시됩니다. app/ error.tsx error.tsx 오류가 발생하면 두 개의 소품이 오류 폴백 구성 요소로 전달됩니다. 오류 객체 자체와 오류에서 복구하려는 함수 (일반적으로 재설정이라고 함) : .

이제 오류 소품을 통해 오류 메시지에 액세스하고 다음과 같이 화면에 표시 할 수 있습니다.

"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>
  );
}

로그인 후 복사

이 함수가 호출되면 재설정 함수는 오류 경계로 둘러싸인 원본 콘텐츠를 다시 렌더링하려고 시도합니다. 성공하면 폴백 오류 구성 요소가 다시 렌더링 된 컨텐츠로 대체됩니다.

onclick 핸들러를 사용하여 버튼에서 재설정 함수 호출을 구현할 수 있습니다. 이런 식으로, 우리는 실수를 성공적으로 처리했습니다! <<> 추상 오류 메시지 <🎜 🎜> 실제 사용자 인증 응용 프로그램에는 보호되어야하는 많은 경로가있을 수 있으며 인증 오류가 발생하면 여러 인스턴스에서 동일한 인증 오류 메시지를 사용해야합니다.

추상 오류 메시지 (반복적으로 쓰여지지 않음)에서 인증과 관련된 사용자 정의 예외를 쉽게 만들 수 있습니다.

이렇게하려면 <, 🎜>라는 디렉토리를 만들고 해당 디렉토리에서 <🎜 🎜>라는 파일을 만듭니다. 이 파일에서는 다음과 같이 사용자 정의 인증 오류 예외를 작성하고 내보낼 수 있습니다.

이제, 우리는이 새로운 사용자 정의 <🎜

를 기본 페이지에 정규 Mastering Next.js Error Handling with the App Router 를 던질 수 있습니다.

이 오류는 생성자에 전달 된 기본 메시지 또는 나중에 전달해야 할보다 구체적인 오류를 제공합니다.

오류 처리에 대한 자세한 내용 <🎜 🎜> <'s> 마지막으로, 레이아웃 및 서버 오류에 대한 엑스트라를 살펴 보겠습니다.

레이아웃의 오류 <🎜 🎜> 오류는 응용 프로그램의 어느 곳에서나 발생할 수 있으며 (<🎜 🎜> 파일이 아님), Next.js가 사용하는 파일 라우팅 시스템은 중첩 라우팅 및 레이아웃에서

"use client";

type ErrorProps = {
  error: Error;
  reset: () => void;
};

export default function Error({ error, reset }: ErrorProps) {
  // ...
}

로그인 후 복사

경계가 작동하는 방식에 영향을 미칩니다.

오류는 가장 가까운 상위 오류 경계로 거품되며 아래 이미지에서 볼 수 있습니다.

<p className="mt-4 text-gray-500">
  {error.message || "您必须登录才能访问此页面"}
</p>

로그인 후 복사

이 오류 버블 링의 특성은

경계가 같은 섹션의 레이아웃 파일에서 오류를 캡처하지 않음을 의미합니다. 오류 경계가 레이아웃 파일을 감싸기 때문입니다. error.tsx

루트 레이아웃이나 템플릿에서 오류가 발생하면 아래 그림과 같이 파일을 사용하십시오. Mastering Next.js Error Handling with the App Router

경계 전체 응용 프로그램을 랩핑 하므로이 파일을 사용할 때 고유 한 global-error.tsx 및 태그를 추가하십시오. 이 오류 경계는 다른 중첩 된

경계가 잡히지 않은 오류를 포착하므로 자주 활성화되지 않습니다.

Mastering Next.js Error Handling with the App Router 서버 오류 서버 구성 요소에서 또는 데이터 수집 중에 오류가 발생하면 다음 .js는 해당 오류 객체를 가장 가까운

경계로 전달합니다.

global-error.tsx 결론 및 다음 단계 많은 개발자들이 오류 처리를 구현하는 것이 번거 롭다고 생각하지만 응용 프로그램의 중요한 부분이며 오류 처리를 성공적으로 구현하면 응용 프로그램의 사용자 경험이 크게 향상됩니다. ~~next.js는 앱 라우터와 error.tsx 파일 컨벤션으로이를 매우 쉽게 만듭니다.~~

오류 처리에 대한 자세한 내용은 오류 처리에 대한 Next.js 문서를 참조하고 GitHub 에서이 기사의 완료 코드를 볼 수도 있습니다.