Changing to new head structure.

src/app/(extra)/book-success/head.jsx

@@ -1,10 +0,0 @@
-import StandardHead from '@/components/StandardHead';
-
-export default async function Head({ params }) {
-  return (
-    <StandardHead
-      title="Download Foundations of High-Performance React"
-      description="Download Foundations of High-Performance React"
-    />
-  );
-};

src/app/(extra)/book-success/page.jsx

@@ -1,5 +1,9 @@
 import JustifiedSection from '@/components/JustifiedSection'
 
+export const metadata = {
+  title: 'Download Foundations of High-Performance React'
+};
+
 export default async function Page({ params }) {
   return (
     <>

src/app/(extra)/book/head.jsx

@@ -1,10 +0,0 @@
-import StandardHead from '@/components/StandardHead';
-
-export default async function Head({ params }) {
-  return (
-    <StandardHead
-      title="Foundations of High-Performance React"
-      description="A book diving deep into the details of how React actually works."
-    />
-  );
-};

src/app/(extra)/book/page.jsx

@@ -24,6 +24,11 @@ const chapters = [
   'Conclusion'
 ];
 
+export const metadata = {
+  title: 'Foundations of High-Performance React',
+  description: 'A book diving deep into the details of how React actually works.'
+};
+
 export default async function Page({ params }) {
   return (
     <>

src/app/(main)/articles/redux-with-react/head.jsx

@@ -1,9 +0,0 @@
-import StandardHead from '@/components/StandardHead';
-
-export default async function Head({ params }) {
-  return (
-    <StandardHead
-      title="Should you use Redux with React? — The React Show"
-    />
-  );
-};

src/app/(main)/articles/redux-with-react/page.jsx

@@ -1,5 +1,9 @@
 import { Article, H2, P } from '@/components/Components';
 
+export const metadata = {
+  title: 'Should you use Redux with React?'
+};
+
 export default function Page() {
   return (
     <Article

src/app/(main)/articles/render-tree-performance/head.jsx

@@ -1,9 +0,0 @@
-import StandardHead from '@/components/StandardHead';
-
-export default async function Head({ params }) {
-  return (
-    <StandardHead
-      title="How React Renders Component Trees and How To Make It Faster — The React Show"
-    />
-  );
-};

src/app/(main)/articles/render-tree-performance/page.jsx

@@ -5,6 +5,10 @@ import { Article, H2, P, A } from '@/components/Components';
 import renderTreeFlow from '@/images/render-tree-flow.gif';
 import renderTreeMemo from '@/images/render-tree-memo.gif';
 
+export const metadata = {
+  title: 'How React Renders Component Trees and How To Make It Faster'
+};
+
 export default function Page() {
   return (
     <Article

src/app/(main)/articles/whitelabeling-with-react/head.jsx

@@ -1,9 +0,0 @@
-import StandardHead from '@/components/StandardHead';
-
-export default async function Head({ params }) {
-  return (
-    <StandardHead
-      title="White-labeling with React — The React Show"
-    />
-  );
-};

src/app/(main)/articles/whitelabeling-with-react/page.jsx

@@ -1,5 +1,9 @@
 import { Article, H2, P, A } from '@/components/Components';
 
+export const metadata = {
+  title: 'White-labeling with React'
+};
+
 export default function Page() {
   return (
     <Article

src/app/(main)/episodes/page.jsx

@@ -1,5 +1,10 @@
 import Episodes from '@/components/Episodes'
 
+export const metadata = {
+  title: 'All Episodes',
+  description: 'List of all episodes for The React Show.'
+};
+
 export default async function AllEpisodes() {
   return (
     <Episodes />

src/app/(main)/head.jsx

@@ -1,10 +0,0 @@
-import StandardHead from '@/components/StandardHead';
-
-export default function Head({ params }) {
-  return (
-    <StandardHead
-      title="The React Show - Weekly React Focused Podcast"
-      description="Weekly podcast focused on React, programming, and software engineering."
-    />
-  );
-}

src/app/(main)/page.jsx

@@ -61,6 +61,10 @@ function Loading() {
   );
 }
 
+export const metadata = {
+  description: "Weekly podcast focused on React, programming, and software engineering."
+};
+
 export default async function Home() {
   return (
     <>

src/app/(main)/podcast/[slug]/head.jsx

@@ -1,13 +0,0 @@
-import { getEpisode } from '@/data/episodes'
-
-import StandardHead from '@/components/StandardHead';
-
-export default async function Head({ params }) {
-  const episode = await getEpisode({ episodeSlug: params.slug })
-  return (
-    <StandardHead
-      title={`${episode.title} - The React Show`}
-      description={episode.description}
-    />
-  );
-};

src/app/(main)/podcast/[slug]/page.jsx

@@ -90,6 +90,14 @@ async function TranscriptWithPlayer({ episode }) {
   )
 };
 
+export async function generateMetadata({ params }) {
+  const episode = await getEpisode({ episodeSlug: params.slug });
+  return {
+    title: episode.title,
+    description: `Podcast episode: ${episode.description}`
+  };
+};
+
 export default async function Page({ params }) {
   const episode = await getEpisode({ episodeSlug: params.slug })
   let date = new Date(episode.published)

src/app/head.jsx

@@ -1,10 +0,0 @@
-export default function Head() {
-  return (
-    <>
-      <title>Create Next App</title>
-      <meta content="width=device-width, initial-scale=1" name="viewport" />
-      <meta name="description" content="Generated by create next app" />
-      <link rel="icon" href="/favicon.png" />
-    </>
-  )
-}

src/app/layout.jsx

@@ -3,6 +3,13 @@ import './globals.css';
 import { AudioPlayer } from '@/components/player/AudioPlayer'
 import { AudioProvider } from '@/components/AudioProvider'
 
+export const metadata = {
+  title: {
+    default: 'The React Show - Weekly React Focused Podcast',
+    template: '%s | The React Show'
+  }
+};
+
 export default function RootLayout({children}) {
   return (
     <html lang="en">