tastejs · addyosmani · Aug 27, 2023
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,10 +1,10 @@
-
-module.exports = {
-  extends: ["next", "next/core-web-vitals"],
-  rules: {
-    "@next/next/no-img-element": 0, // TODO: Remove when Image component is updated
-    "react/display-name": 0,
-    "no-unused-vars": 1,
-    "react/no-unknown-property": 0,
-  },
-};
+
+module.exports = {
+  extends: ["next", "next/core-web-vitals"],
+  rules: {
+    "@next/next/no-img-element": 0, // TODO: Remove when Image component is updated
+    "react/display-name": 0,
+    "no-unused-vars": 1,
+    "react/no-unknown-property": 0,
+  },
+};
diff --git a/pages/_error.js → app/_error.js b/pages/_error.js → app/_error.js
diff --git a/pages/error.js → app/error/page.js b/pages/error.js → app/error/page.js
diff --git a/pages/genre/index.js → app/genre/page.js b/pages/genre/index.js → app/genre/page.js
@@ -1,7 +1,7 @@
+'use client'
 
 import { useEffect, useState } from 'react';
-import Head from 'next/head';
-import Router, { useRouter } from 'next/router';
+import { useRouter } from 'next/router';
 import { useDispatch, useSelector } from 'react-redux';
 import { animateScroll as scroll } from 'react-scroll';
 
@@ -84,9 +84,7 @@ const Genre = () => {
   return (
     <PageWrapper>
       <PaddingWrapper>
-        <Head>
-          <title>{`${general.selectedMenuItemName} Movies`}</title>
-        </Head>
+        <Metadata title={`${general.selectedMenuItemName} Movies`} />
         <Header
           title={general.selectedMenuItemName}
           subtitle='movies' />
@@ -101,4 +99,4 @@ const Genre = () => {
   );
 };
 
-export default Genre;
+export default Genre;
diff --git a/app/layout.jsx b/app/layout.jsx
@@ -0,0 +1,16 @@
+import { Inter } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}
diff --git a/pages/list/add-or-edit/index.js → app/list/add-or-edit/page.js b/pages/list/add-or-edit/index.js → app/list/add-or-edit/page.js
@@ -1,8 +1,9 @@
+'use client'
 
 
 import { useState, useEffect } from 'react';
 import Router, { useRouter } from 'next/router';
-import Head from 'next/head';
+import { Metadata } from 'next/head';
 
 import Header from 'parts/Header';
 import NotFound from 'parts/NotFound';
@@ -171,9 +172,9 @@ const AddOrEdit = ({
   if (editStatus === STATUSES.RESOLVED) {
     return (
       <>
-        <Head>
+        <Metadata>
           <title>{listId ? listName : 'Create New List: Step1'}</title>
-        </Head>
+        </Metadata>
         <PageWrapper>
           <PaddingWrapper>
             <Header
@@ -218,4 +219,4 @@ const AddOrEdit = ({
   }
 };
 
-export default withAuth(AddOrEdit);
+export default withAuth(AddOrEdit);
diff --git a/pages/list/add-or-remove-items/index.js → app/list/add-or-remove-items/page.js b/pages/list/add-or-remove-items/index.js → app/list/add-or-remove-items/page.js
@@ -1,8 +1,9 @@
+'use client'
 
 
 import { useState, useEffect } from 'react';
 import Router, { useRouter } from 'next/router';
-import Head from 'next/head';
+import { Metadata } from 'next/head';
 
 import Header from 'parts/Header';
 import NotFound from 'parts/NotFound';
@@ -204,9 +205,9 @@ const AddOrRemoveItems = ({
   if (status === STATUSES.RESOLVED) {
     return (
       <>
-        <Head>
+        <Metadata>
           <title>{movies.name}</title>
-        </Head>
+        </Metadata>
         <PageWrapper>
           <PaddingWrapper>
             <Header
@@ -256,4 +257,4 @@ const AddOrRemoveItems = ({
   }
 };
 
-export default withAuth(AddOrRemoveItems);
+export default withAuth(AddOrRemoveItems);
diff --git a/pages/list/choose-image/index.js → app/list/choose-image/page.js b/pages/list/choose-image/index.js → app/list/choose-image/page.js
@@ -1,3 +1,4 @@
+'use client'
 
 
 import {
@@ -6,7 +7,7 @@ import {
   useCallback
 } from 'react';
 import { useRouter } from 'next/router';
-import Head from 'next/head';
+import { Metadata } from 'next/head';
 import { animateScroll as scroll } from 'react-scroll';
 
 import Header from 'parts/Header';
@@ -23,7 +24,7 @@ import withAuth from 'utils/hocs/withAuth';
 import QUERY_PARAMS from 'utils/constants/query-params';
 import STATUSES from 'utils/constants/statuses';
 import { TMDB_API_NEW_VERSION, TMDB_IMAGE_BASE_URL } from 'config/tmdb';
-import tmdbAPI from 'services/tmdbAPI';
+import tmdbAPI from 'services/tmdb';
 
 const BACKDROP_STATUSES = {
   SELECTED: 'SELECTED',
@@ -135,9 +136,9 @@ const ChooseImage = ({
   if (status === STATUSES.RESOLVED) {
     return (
       <>
-        <Head>
+        <Metadata>
           <title>{movies.name}</title>
-        </Head>
+        </Metadata>
         <PageWrapper>
           <PaddingWrapper>
             <Header
@@ -190,4 +191,4 @@ const ChooseImage = ({
   }
 };
 
-export default withAuth(withTheme(ChooseImage));
+export default withAuth(withTheme(ChooseImage));
diff --git a/pages/list/index.js → app/list/page.js b/pages/list/index.js → app/list/page.js
@@ -1,6 +1,6 @@
+'use client'
 
 import { useEffect, useState } from 'react';
-import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { animateScroll as scroll } from 'react-scroll';
 
@@ -82,9 +82,7 @@ const List = () => {
   if (status === STATUSES.RESOLVED) {
     return (
       <>
-        <Head>
-          <title>{movies.name ?? 'List'}</title>
-        </Head>
+        <Metadata title={movies.name ?? 'List'} />
         <PageWrapper>
           <PaddingWrapper>
             <Header
@@ -111,4 +109,4 @@ const List = () => {
   }
 };
 
-export default List;
+export default List;
diff --git a/pages/list/remove/index.js → app/list/remove/page.js b/pages/list/remove/index.js → app/list/remove/page.js
@@ -1,7 +1,8 @@
+'use client'
 
 import { useState, useEffect } from 'react';
 import Router, { useRouter } from 'next/router';
-import Head from 'next/head';
+import { Metadata } from 'next/head';
 
 import Header from 'parts/Header';
 import NotFound from 'parts/NotFound';
@@ -114,9 +115,9 @@ const Remove = ({
   if (status === STATUSES.RESOLVED) {
     return (
       <>
-        <Head>
+        <Metadata>
           <title>Delete List</title>
-        </Head>
+        </Metadata>
         <PageWrapper>
           <PaddingWrapper>
             <Header
@@ -156,4 +157,4 @@ const Remove = ({
   }
 };
 
-export default withAuth(Remove);
+export default withAuth(Remove);
diff --git a/pages/movie/index.js → app/movie/page.js b/pages/movie/index.js → app/movie/page.js
@@ -1,8 +1,9 @@
+'use client'
 
 
 import { useEffect } from 'react';
 import Router, { useRouter } from 'next/router';
-import Head from 'next/head';
+import { Metadata } from 'next/head';
 import { useDispatch, useSelector } from 'react-redux';
 import { animateScroll as scroll } from 'react-scroll';
 
@@ -76,9 +77,9 @@ const Movie = () => {
 
   return (
     <PageWrapper>
-      <Head>
+      <Metadata>
         <title>{`${movie.title} - Movie Library`}</title>
-      </Head>
+      </Metadata>
       <MovieSummary
         baseUrl={baseUrl}
         movie={movie} />
@@ -89,4 +90,4 @@ const Movie = () => {
   );
 };
 
-export default Movie;
+export default Movie;
diff --git a/pages/my-lists/index.js → app/my-lists/page.js b/pages/my-lists/index.js → app/my-lists/page.js
@@ -1,7 +1,7 @@
+'use client'
 
 
 import { useEffect, useState } from 'react';
-import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { animateScroll as scroll } from 'react-scroll';
 
@@ -81,9 +81,7 @@ const MyLists = ({
   if (status === STATUSES.RESOLVED) {
     return (
       <>
-        <Head>
-          <title>My Lists</title>
-        </Head>
+        <Metadata title="My Lists" />
         <PageWrapper>
           <PaddingWrapper>
             <Header
@@ -99,4 +97,4 @@ const MyLists = ({
   }
 };
 
-export default withAuth(MyLists);
+export default withAuth(MyLists);
diff --git a/pages/404.js → app/not-found.js b/pages/404.js → app/not-found.js
diff --git a/app/not-found.jsx b/app/not-found.jsx
@@ -0,0 +1,11 @@
+import Link from 'next/link';
+
+export default function NotFound() {
+  return (
+    <div>
+      <h2>Not Found</h2>
+      <p>Could not find requested resource</p>
+      <Link href="/">Return Home</Link>
+    </div>
+  );
+}
diff --git a/pages/index.js → app/page.js b/pages/index.js → app/page.js
@@ -1,3 +1,4 @@
+'use client'
 /**
  * TODO:
  * https://nextjs.org/blog/next-9#automatic-partial-static-export RE: https://github.com/vercel/next.js/discussions/10874
@@ -7,8 +8,7 @@
  */
 
 import { useEffect } from 'react';
-import Head from 'next/head';
-import Router, { useRouter } from 'next/router';
+import { useRouter } from 'next/router';
 import { useDispatch, useSelector } from 'react-redux';
 import { animateScroll as scroll } from 'react-scroll';
 
@@ -99,16 +99,7 @@ const Home = () => {
 
   return (
     <>
-      <Head>
-        {/* MEMO: inspired by https://addyosmani.com/blog/preload-hero-images/ */}
-        <link
-          rel='preload'
-          as='fetch'
-          // TODO: page is hardcoded
-          href={`${TMDB_API_BASE_URL}/${TMDB_API_VERSION}/movie/popular?api_key=${TMDB_API_KEY}&page=1`}
-          crossOrigin='true' />
-        <title>{`${general.selectedMenuItemName} Movies`}</title>
-      </Head>
+      <Metadata title={`${general.selectedMenuItemName} Movies`} />
       {movies.loading ? (
         <Loader />
       ) : (

diff --git a/pages/person/index.js → app/person/page.js b/pages/person/index.js → app/person/page.js
@@ -1,8 +1,9 @@
+'use client'
 
 
 import { useState, useEffect } from 'react';
 import Router, { useRouter } from 'next/router';
-import Head from 'next/head';
+import { Metadata } from 'next/head';
 import { useDispatch, useSelector } from 'react-redux';
 import { animateScroll as scroll } from 'react-scroll';
 
@@ -85,9 +86,9 @@ const Person = () => {
 
   return (
     <PageWrapper>
-      <Head>
+      <Metadata>
         <title>{`${person.name} - Person Library`}</title>
-      </Head>
+      </Metadata>
       <PersonSummary
         baseUrl={baseUrl}
         person={person} />
@@ -100,4 +101,4 @@ const Person = () => {
   );
 };
 
-export default Person;
+export default Person;
diff --git a/pages/search/index.js → app/search/page.js b/pages/search/index.js → app/search/page.js
@@ -1,8 +1,8 @@
+'use client'
 
 
 import { useEffect } from 'react';
-import Head from 'next/head';
-import Router, { useRouter } from 'next/router';
+import { useRouter } from 'next/router';
 import { useDispatch, useSelector } from 'react-redux';
 import { animateScroll as scroll } from 'react-scroll';
 
@@ -79,9 +79,7 @@ const Search = () => {
     return (
       <PageWrapper>
         <PaddingWrapper>
-          <Head>
-            <title>{`${searchTerm} - Search Results`}</title>
-          </Head>
+          <Metadata title={`${searchTerm} - Search Results`} />
           <Header
             title={searchTerm}
             subtitle='search results' />
@@ -94,4 +92,4 @@ const Search = () => {
   }
 };
 
-export default Search;
+export default Search;
diff --git a/components/AnchorButton/index.js b/components/AnchorButton/index.js
@@ -1,5 +1,7 @@
 
 
+import React from "react";
+
 import Button from 'components/UI/Button';
 
 const AnchorButton = React.forwardRef(({