Hoist Metadata into a layoutmain wrapper

Welp... Won't be showing this one as a success. I was using useEffect which only populated the data after the initial page download. The net of that is that the OG Social card data was always the default and not whatever was customized for the page.

~~~

Show the way you did LayoutMain and HeadTag and the useState for pageDetails and setPageDetails in the nextjs-starter