Next.js: Functional Components vs ES6 Classes in NextJS

Created on 15 Jul 2018 · 1Comment · Source: vercel/next.js

All of the examples and tutorials of NextJs pages which presented in its docs and other references are with functional components.

So, What about classes? What happens to getInitialProps (or other features that mentioned in docs) when a functional component replaces with an ES6 class. Is that page still a NextJS page after replacing?

Source

behnamazimi

Most helpful comment

The contract is that you export a React component, which can be a function or a class, for example:

import React from 'react'
export default class SomePage extends React.Component {
  static async getInitialProps() {
    return {}
  }
  render() {
    return <div>test</div>
  }
}

Class components work fine when exported 👍

The docs mention exporting class components too btw: https://github.com/zeit/next.js#fetching-data-and-component-lifecycle

timneutkens on 15 Jul 2018

👍7 ❤1

>All comments

The contract is that you export a React component, which can be a function or a class, for example:

import React from 'react'
export default class SomePage extends React.Component {
  static async getInitialProps() {
    return {}
  }
  render() {
    return <div>test</div>
  }
}

Class components work fine when exported 👍

The docs mention exporting class components too btw: https://github.com/zeit/next.js#fetching-data-and-component-lifecycle

timneutkens on 15 Jul 2018

👍7 ❤1

Was this page helpful?

0 / 5 - 0 ratings