I have been a while outside the ReactJS world, and I decided to come back and give a try with NextJS. However I am getting a Invalid Hook Call issue.

I'm trying to convert my ReactJS project to a NextJS project. I'll show the code in a shorter format, just for the example.

Here is my Reactjs:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import MainPage from './components/MainPage';


class App extends Component {
  render() {
    return (
        <Router>
          <main>
            <Switch>
              <Route exact path='/' component={MainPage}/>
            </Switch>
          </main>
        </Router>
    );
  }
}

export default App;

MainPage.js

import React, { Fragment } from 'react';

import './MainPage.css';

const MainPage = () => {
    return (
        <Fragment>
            <div>
                  Hello There :-)
            </div>
       <Fragment>
    );
};

export default MainPage;

Here is my Nextjs:

_app.js

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

index.js

import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import MainPage from './components/MainPage';


class App extends Component {
  render() { **// not sure about the render**
    return (
        <Router>
          <main>
            <Switch> **// I think was switched to Routes**
              <Route exact path='/' component={MainPage}/> **// I think was switched to element**
            </Switch>
          </main>
        </Router>
    );
  }
}

export default App;

MainPage.js

import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>    
      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
      </main>
    </div>
  )
}