Ненайденная страница не работает в next.js 13

Question

Ненайденная страница не работает в next.js 13

Это структура моего проекта next.js.

И моя страница 404.js:

      'use client';

export default function NotFound() {
    return (
        <div>
            <h2>Not Found</h2>
        </div>
    );
}

когда я ввожу неправильный маршрут, он не работает и не переходит на мою пользовательскую страницу, а переходит на страницу 404 next.js. почему, Где я не прав?

заранее спасибо.

21

next.js nextjs13

Источник

user14182182 31 янв '23 в 19:41

6 ответов

Другие вопросы по тегам next.js nextjs13

user6419389 03 мар '23 в 09:12 2023-03-03 09:12 · Answer 1 · 2023-03-03 09:12

С Next 13.2, согласно документам:

«Примечание: в настоящее время not-found.js отображается только при запуске функцией notFound, мы работаем над поддержкой перехвата несопоставленных маршрутов».

Так что это еще не автомат, и файл должен быть названnot-found.jsвместо404.js. Но похоже, что они работают над этим, так что, вероятно, скоро он заработает из коробки.

А пока, похоже, что динамические маршруты разрешаются после статических маршрутов, вы можете решить эту проблему, создав динамический универсальный маршрут с помощью[...not_found]и добавьте его в папку вашего приложения.

Внутри папки динамического маршрута добавьтеpage.jsфайл, вызывающийnotFound()функция.

приложение/[...not_found]/page.js

      import Link from 'next/link'
import {notFound} from "next/navigation"

export default function NotFoundCatchAll() {
  notFound()
  return null
}

И внутриnot_found.jsфайл в корне папки вашего приложения, вы можете добавить свою пользовательскую страницу 404.

приложение/not_found.js

      import Link from 'next/link'

export default function NotFound() {
  return <div>
      <h1>Not found – 404!</h1>
      <div>
        <Link href="/">Go back to Home</Link>
      </div>
  </div>
}

Важно отметить, что этот подход может создать проблемы, если у вас есть несколько динамических маршрутов в папке вашего приложения. Однако динамические маршруты в другой статической папке должны быть в порядке.

Надеюсь, это поможет и удачи!

user2889988 02 фев '23 в 11:24 2023-02-02 11:24 · Answer 2 · 2023-02-02 11:24

NextJS13 не выполняет обработку ошибок в этом формате, вы не хотите использовать файл с именем404.jsно вместо этого файл с именемerror.js.

Это позволит поймать любые ошибки, отправленные из запроса API, возвращающего ответ 404.

Документы здесь: https://beta.nextjs.org/docs/routing/error-handling

Если вместо этого ваш API возвращает ответ 200, но пустое тело, вы можете создать другой компонент с именемnot-found.js, импортируйте его в файл, в котором вы хотите, чтобы он отображался, и верните его, если API пуст, например:

приложение/приборная панель/not-found.js

      export default function NotFound() {
  return (
    <>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
    </>
  );
}

приложение/приборная панель/index.js:

      import { notFound } from 'next/navigation';

async function fetchUsers(id) {
  const res = await fetch('https://...');
  if (!res.ok) return undefined;
  return res.json();
}

export default async function Profile({ params }) {
  const user = await fetchUser(params.id);

  if (!user) {
    notFound();
  }

  // ...
}

Документы здесь: https://beta.nextjs.org/docs/api-reference/notfound

Brusooo 23 окт '23 в 05:29 2023-10-23 05:29 · Answer 3 · 2023-10-23 05:29

Создайте каталог с надписью[404]и внутри него поместитеpage.{tsx/jsx/js}файл как обычно. Все готово!

2

Источник

Brusooo 23 окт '23 в 05:29

user7353382 03 окт '23 в 16:43 2023-10-03 16:43 · Answer 4 · 2023-10-03 16:43

Как сказал @Fredrik Carlsson

В Next 13.3 вам просто нужно изменить имя файла на not-found.js.

Хотя это относится к версии 13.3 и выше, мне все равно не удалось заставить это работать. Вместо этого я продолжал получать эту проблему:

      Uncaught (in promise) Error: NEXT_NOT_FOUND at notFound

Оказывается, проблема связана с тем, что я использую'use client'вверху моего файла. После удаления этой строки мойnot-found.jsфайл работает корректно.

Если вам интересно узнать о структуре и о том, как я указываю свой ненайденный файл , у меня есть:

Один файл в/app/not-found.jsкоторый обрабатывает любые недопустимые маршруты в корне/
И еще один в/app/blog/[slug]/not-found.jsкоторый обрабатывает любые недопустимые маршруты в блоге/blog

Если вам интересно, как я запускаю функцию not-found :

      // app/blog/[slug]/page.js

async function getBlogPost(slug) {
  const blogPost = await client.fetch('https://example.com/...')

  if (!blogPost) {
    notFound() // <-- this triggers this the nearest not-found.js file
  }
  return blogPost
}

const BlogPost = async ({params}) => {
  const slug = params.slug
  const post = await getBlogPost(slug)

  return <Post post={post} />
}

export default BlogPost

Рекомендации

Shirshak kandel 24 ноя '23 в 06:20 2023-11-24 06:20 · Answer 5 · 2023-11-24 06:20

Ссылка на видео в codeGrepper => https://www.grepper.com/answers/723464/Not-found+page+does+not+work+in+next.js+13?ucard=1

//источник\приложение\not-found.tsx

      export default function NotFound() {
  return (
    <div>
      <h2>Page not found</h2>
      <p>Are you lost?</p>
    </div>
  );
}

для всего веб-сайта вы можете использовать not-found.tsx или jsx в корне папки приложения.

приложение\продукты[productId]\обзоры[reviewId]\page.tsx

для отдельной динамической не найденной страницы используйте функцию notFound из next/navigation, мы также можем создать отдельную страницу 404 для каждого сегмента маршрута, создав отдельный not-found.tsx, здесь ниже мы показываем это

      import { notFound } from "next/navigation";

export default function ReviewDetail({
  params,
}: {
  params: { productId: string; reviewId: string };
}) {
  if (parseInt(params.reviewId) > 1000) {
    notFound();
  }  

  return (
    <h1>
      Review {params.reviewId} for product {params.productId}{" "}
    </h1>
  );
}

//src\app\products[productId]\reviews[reviewId]\not-found.tsx

      export default function NotFound() {
  return (
    <div>
      <h2>Review not found cannot be greater then 1000 id</h2>
    </div>
  );       
}

aniebo victor 02 фев '23 в 05:24 2023-02-02 05:24 · Answer 6 · 2023-02-02 05:24

Чтобы создать ненайденную страницу в Next.js с помощью папки приложения, выполните следующие действия:

Создайте новую папку с именем pages в корневом каталоге вашего проекта.
В папке pages создайте новый файл с именем 404.js.

В файле 404.js добавьте следующий код для отображения страницы «Не найдено»:

        const NotFound = () => {
  return (
    <div>
      <h1>404 - Not Found</h1>
    </div>
  )
}

export default NotFound

В файле _app.js добавьте универсальный маршрут для отображения страницы «Не найдено» для любых неизвестных маршрутов:

Теперь, когда пользователь посещает маршрут, которого нет в вашем приложении, будет отображаться страница «Не найдено».