此问题在此处已有答案:
How to fetch data server-side in the app directory of Next.js? Tried getStaticProps but it's returning undefined(3个答案)
Is possible to use getServerSideProps on client components inside app dir?(1个答案)
12天前关门了。
我尝试从getServerSideProps
的NextJS复制/粘贴官方示例,它抛出错误:
import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
type Repo = {
name: string
stargazers_count: number
}
export const getServerSideProps: GetServerSideProps<{
repo: Repo
}> = async () => {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const repo = await res.json()
return { props: { repo } }
}
export default function Page({
repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
return repo.stargazers_count
}
字符串
错误代码:
./app/page.tsx
ReactServerComponentsError:
"getServerSideProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching
型
不幸的是,它引用了数据获取文档,其中包含导致我出现此错误的示例。
复制步骤:
1.创建应用程序:
npx create-next-app@latest
(TypeScript:是,AppRouter:是,src目录:无)
1.从文档中将pages.tsx更改为上面的变体。
package.json:
"scripts": {
"dev": "next dev -p 8002",
"build": "next build",
"start": "next start -p 8002",
"lint": "next lint"
},
"dependencies": {
"@types/node": "20.4.2",
"@types/react": "18.2.15",
"@types/react-dom": "18.2.7",
"autoprefixer": "10.4.14",
"eslint": "8.45.0",
"eslint-config-next": "13.4.10",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-prettier": "^5.0.0",
"next": "13.4.10",
"postcss": "8.4.26",
"prettier": "^3.0.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"tailwindcss": "3.3.3",
"typescript": "5.1.6"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^6.1.0"
}
型
如何处理这个问题,以及如何在AppRouter中使用getServerSideProps?
2条答案
按热度按时间wb1gzix01#
如果您正在使用应用路由器,则无法使用getServerSideProps。请查看此文档,了解如何使用应用程序目录中的组件获取数据。
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching
az31mfrm2#
要使用
getServerSideProps
,您的组件需要位于/pages
目录中。我像这样改变了你的例子的结构,让它工作:字符串
把你的代码移到那里会解决你的问题。这是因为
/pages
目录中的组件被特殊处理。您可以阅读更多的here,但简而言之,next会根据pages目录自动处理路由,并在返回页面之前执行服务器端逻辑。在非页面组件中这样做是行不通的,因为这些组件是在页面加载之后提供的(例如不是服务器端呈现的)