extends Component(react) or extends App(next/app)

Question

Im new to nextjs and when I create specific pages in next.js inside ./pages folder, and each specific pages are class-based components, then what we will going to extends?

class PageName extends Component {} // from 'react'
class PageName extends App {} from 'next/app

I try to extend Component from react and it works where, but the _app.js is useless even i delete it, it doesnt effect the page i created, and if i extend App from next/app it gives me the below error.

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

Adam Cai · Accepted Answer · 2021-04-03 11:44:21Z

0

_app.js is used to overwrite the default app.js, so yes, if you delete it, then your code still works.

You should extend from React.Component if you are writing class component.

answered Apr 3, 2021 at 11:44

Adam Cai

3971 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mclain Arandia Cabais Over a year ago

thanks for feedback Adam,.. actually i figure out my mistake... these errors exist because i used nextjs Custom Page Extension(nextjs.org/docs/api-reference/next.config.js/…) and i set ['page.js'] base extension and I forget to rename _app.js and _document.js to _app.page.js and _document.page.js.

Collectives™ on Stack Overflow

extends Component(react) or extends App(next/app)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related