higher-order-components

Functions are not valid as a React child. This may happen if you return a Component instead of from render

You are using it as a regular component, but it’s actually a function that returns a component. Try doing something like this: const NewComponent = NewHOC(Movie) And you will use it like this: <NewComponent someProp=”someValue” /> Here is a running example: const NewHOC = (PassedComponent) => { return class extends React.Component { render() { return … Read more

Create a HOC (higher order component) for authentication in Next.js

You should separate and extract your authentication logic from getServerSideProps into a re-usable higher-order function. For instance, you could have the following function that would accept another function (your getServerSideProps), and would redirect to your login page if the userToken isn’t set. export function requireAuthentication(gssp) { return async (context) => { const { req, res … Read more