[README] Named components and remove 'import react'

[matamatanot]

Description of Change(s):

Generally, Next.js recommend the use of named components.

vercel/next.js#17200

https://github.com/vercel/next.js/blob/f8aeaa479ecaaccd4807db42e8df256aa813b194/packages/next/build/babel/plugins/no-anonymous-default-export.ts#L41

Anonymous arrow functions cause Fast Refresh to not preserve local component state.

---

import React from 'react'; isn't necessary.

vercel/next.js#16603

[matamatanot]

How about App Container Deprecated?

In versions prior to v9.0.4 the <Container> component was used in ./pages/_app.js to handle scrolling to hashes.
This handling has been moved up the tree so the <Container> component is no longer needed in your custom <App>!

https://github.com/garmeeh/next-seo/blob/master/README.md#default-seo-configuration

import App, { Container } from 'next/app';
import React from 'react';
import { DefaultSeo } from 'next-seo';

// import your default seo configuration
import SEO from '../next-seo.config';

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <Container>
        <DefaultSeo
          openGraph={{
            type: 'website',
            locale: 'en_IE',
            url: 'https://www.url.ie/',
            site_name: 'SiteName',
          }}
          twitter={{
            handle: '@handle',
            site: '@site',
            cardType: 'summary_large_image',
          }}
        />
        <Component {...pageProps} />
      </Container>
    );
  }
}

[garmeeh]

@matamatanot yeah that example is a little outdated now that I look at it 😅 A pull request to update this to a functional component would be brilliant!

[garmeeh]

Thank you 👍

[garmeeh]

@all-contributors add @matamatanot doc

[allcontributors]

@garmeeh

I've put up a pull request to add @matamatanot! 🎉