扩展组件（反应）或扩展应用程序（下一个/应用程序）

Posted 2023-03-30

【中文标题】扩展组件（反应）或扩展应用程序（下一个/应用程序）

【英文标题】：extends Component(react) or extends App(next/app)

【发布时间】：2021-06-29 23:39:23

【问题描述】：

我是 nextjs 新手，当我在 ./pages 文件夹中的 next.js 中创建特定页面时，每个特定页面都是基于类的组件，那么我们将要扩展什么？

class PageName extends Component // 来自“react” class PageName extends App from 'next/app

我尝试从 react 扩展 Component 并且它在哪里工作，但是 _app.js 即使我删除它也没用，它不会影响我创建的页面，如果我从 next/app 扩展 App 它会给我以下错误.

nodeStackFrames.js:39 在 loadGetInitialProps 处未捕获（file://C:\xampp\htdocs\nextjs-projects\mac\node_modules\next\dist\next-server\lib\utils.js:3:690） 在 Function.appGetInitialProps (file://C:\xampp\htdocs\nextjs-projects\mac.next\server\pages_app.js:156:58) 在 loadGetInitialProps (file://C:\xampp\htdocs\nextjs-projects\mac\node_modules\next\dist\next-server\lib\utils.js:5:101) 在 Function.appGetInitialProps (file://C:\xampp\htdocs\nextjs-projects\mac.next\server\pages_app.js:156:58) 在 loadGetInitialProps (file://C:\xampp\htdocs\nextjs-projects\mac\node_modules\next\dist\next-server\lib\utils.js:5:101) 在 renderTohtml (file://C:\xampp\htdocs\nextjs-projects\mac\node_modules\next\dist\next-server\server\render.js:28:1529) 在异步（文件：//C:\xampp\htdocs\nextjs-projects\mac\node_modules\next\dist\next-server\server\next-server.js:112:97） 在异步（文件：//C:\xampp\htdocs\nextjs-projects\mac\node_modules\next\dist\next-server\server\next-server.js:105:142） 在异步 DevServer.renderToHTMLWithComponents (file://C:\xampp\htdocs\nextjs-projects\mac\node_modules\next\dist\next-server\server\next-server.js:137:387) 在异步 DevServer.renderToHTML (file://C:\xampp\htdocs\nextjs-projects\mac\node_modules\next\dist\next-server\server\next-server.js:138:522) 在异步 DevServer.renderToHTML (file://C:\xampp\htdocs\nextjs-projects\mac\node_modules\next\dist\server\next-dev-server.js:35:578) 在异步 DevServer.render (file://C:\xampp\htdocs\nextjs-projects\mac\node_modules\next\dist\next-server\server\next-server.js:75:236) 在 async Object.fn (file://C:\xampp\htdocs\nextjs-projects\mac\node_modules\next\dist\next-server\server\next-server.js:59:580) 在异步 Router.execute (file://C:\xampp\htdocs\nextjs-projects\mac\node_modules\next\dist\next-server\server\router.js:25:67) 在异步 DevServer.run (file://C:\xampp\htdocs\nextjs-projects\mac\node_modules\next\dist\next-server\server\next-server.js:69:1042) 在异步 DevServer.handleRequest (file://C:\xampp\htdocs\nextjs-projects\mac\node_modules\next\dist\next-server\server\next-server.js:34:504)

【参考方案1】：

_app.js 用于覆盖默认的 app.js，所以是的，如果你删除它，那么你的代码仍然有效。

如果你正在编写类组件，你应该从React.Component 扩展。

【讨论】：

感谢反馈 Adam，.. 实际上我发现了我的错误......这些错误的存在是因为我使用了 nextjs 自定义页面扩展（nextjs.org/docs/api-reference/next.config.js/…）并且我设置了 ['page.js'] 基础扩展名，我忘记将 _app.js 和 _document.js 重命名为 _app.page.js 和 _document.page.js。