英文:

Unable to Display Loading Component in Next.js v13

问题

Here is the translated content:

在 Next.js v13 中，我在实现加载组件方面遇到了问题。根据文档，我在我的 `src` 目录下创建了一个 `loading.tsx` 文件，但它没有显示出来。我还包括了一个用于获取数据的函数。然而，每次刷新页面时，它直接显示来自服务器的 API 响应，而不显示加载组件。有人能建议如何纠正这个问题吗？此外，是否需要进一步配置才能显示加载组件？

以下是我的代码：

在 `page.tsx` 中：

```jsx
import { IResult } from '@/interface';
import Results from '@/components/Results';

const API_KEY = process.env.API_KEY

export default async function Home({ searchParams } : {searchParams: any}) {
  const genre = searchParams.genre || 'fetchTrending';
  const res = await fetch(`https://api.themoviedb.org/3/${genre === 'fetchTopRated'
    ? 'movie/top_rated' :
      'trending/all/week'
  }?api_key=${API_KEY}&language=en-US&page=1`, { next: {revalidate: 100000 }})

  if (!res.ok) {
    throw new Error('无法获取数据')
  }

  const data = await res.json()

  const results = data.results as IResult[]

  console.log({results})
  return (
    <>
      <main className="flex min-h-screen flex-col items-center justify-between p-4">
        <Results results={results}></Results>
      </main>
    </>
  )
}

而在 loading.tsx 中：

import React from 'react';

export default function Loading() {
  return (
    <div>加载中...</div>
  )
}

希望这可以帮助您。谢谢！

<details>
<summary>英文:</summary>

I&#39;m having trouble implementing a loading component in Next.js v13. According to the documentation, I created a `loading.tsx` file in my `src` directory, but it&#39;s not being displayed. I&#39;ve also included a function to fetch data. However, every time I refresh the page, it directly shows the API response from the server without displaying the loading component. Could anyone suggest how to rectify this? Additionally, is there any further configuration required to display the loading component?

Here is my code:

In `page.tsx`:

```jsx
import { IResult } from &#39;@/interface&#39;;
import Results from &#39;@/components/Results&#39;;

const API_KEY = process.env.API_KEY

export default async function Home({ searchParams } : {searchParams: any}) {
  const genre = searchParams.genre || &#39;fetchTrending&#39;;
  const res = await fetch(`https://api.themoviedb.org/3/${genre === &#39;fetchTopRated&#39;
    ? &#39;movie/top_rated&#39; :
      &#39;trending/all/week&#39;
  }?api_key=${API_KEY}&amp;language=en-US&amp;page=1`, { next: {revalidate: 100000 }})

  if (!res.ok) {
    throw new Error(&#39;Failed to fetch data&#39;)
  }

  const data = await res.json()

  const results = data.results as IResult[]

  console.log({results})
  return (
    &lt;&gt;
      &lt;main className=&quot;flex min-h-screen flex-col items-center justify-between p-4&quot;&gt;
        &lt;Results results={results}&gt;&lt;/Results&gt;
      &lt;/main&gt;
    &lt;/&gt;
  )
}

And in loading.tsx:

import React from 'react'

export default function Loading() {
  return (
    <div>loading...</div>
  )
}

I would greatly appreciate any help or suggestions. Thank you!

答案1

得分: 3

Loading 组件在页面间导航时起作用。

来自文档

> 即时加载状态是一种备用UI，它在导航时立即显示。您可以预渲染加载指示器，如骨架屏和旋转器，或未来屏幕的一小部分，如封面照片、标题等。这有助于用户理解应用正在响应并提供更好的用户体验。

如果您从不同页面导航到“首页”，您将看到加载组件。

英文:

Loading component works when you navigate through pages.

From the docs

> An instant loading state is fallback UI that is shown immediately upon
> navigation. You can pre-render loading indicators such as skeletons
> and spinners, or a small but meaningful part of future screens such as
> a cover photo, title, etc. This helps users understand the app is
> responding and provides a better user experience.

if you navigate from a different page to Home page, you will see the loading component

答案2

得分: 2

In NextJS 13，不再将 loading.tsx 和 page.tsx 放在 src 目录中，而是应将这些文件放在 app 目录中。如果您仍然使用 src，则应该是 src/app/...。

例如，如果您想创建主页路由，那么您的文件结构应该如下：
src/app/home/page.tsx
src/app/home/loading.tsx

您无需进行任何额外的配置。

供参考 - Nextjs loading 文档

英文:

In NextJS 13, instead of adding loading.tsx and page.tsx in src you are supposed to add these files in app, if you are using src then src/app/...

For example if you want to create home route then your file structure would look like:
src/app/home/page.tsx
src/app/home/loading.tsx

You don't need any extra configuration for this

For reference - Nextjs loading docs