update to next.js 13.2

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-  "typescript.tsdk": "node_modules\\.pnpm\\[email protected]\\node_modules\\typescript\\lib",
+  "typescript.tsdk": "node_modules/.pnpm/[email protected]/node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true
-}
+}

LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2023, Demir Yerli
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

app/[id]/actualPage.tsx

@@ -14,7 +14,6 @@ export default function SongActualPage({ song }: ISongParams) {
     if (song === null) {
         return <Error></Error>;
     }
-    const [imageClass, setCurrentImageClass] = useState<string>("blur");
     const [openLink, setOpenLink] = useState<() => void>(() => { });
     const defaultPlatforms = (<div className="links card">
         <Link href={song.spotifyLink ?? "/not-there-yet"}>
@@ -51,11 +50,12 @@ export default function SongActualPage({ song }: ISongParams) {
         <div className={`card artwork`}>
             <Image placeholder="blur" blurDataURL="https://i.scdn.co/image/ab67616d0000b273cad190f1a73c024e5a40dddd" src={
                 song.artworkUrl
-            } alt="https://i.scdn.co/image/ab67616d0000b273cad190f1a73c024e5a40dddd" width="500" height="500" />
+            } alt="https://i.scdn.co/image/ab67616d0000b273cad190f1a73c024e5a40dddd" width="400" height="400" />
         </div>
-        <h1 className="text-5xl text text-center">{song.name}</h1>
-        <h2 className="text-3xl text text-center">{song.artist}</h2>
+        <b>
+            <h1 className="text-4xl text text-center">{song.name}</h1>
+            <h2 className="text-2xl text text-center">{song.artist}</h2>
+        </b>
         {platforms}
-        {/* </div> */}
     </>)
 }

app/[id]/page.tsx

@@ -20,8 +20,12 @@ export async function generateMetadata({ params }: any): Promise<Metadata> {
 }
 
 
+export const revalidate = 120;
+
 export default async function SongPage({ params }: any) {
     const song: ISong | null = await getSongApi(params.id);
 
-    return <SongActualPage song={song}></SongActualPage>
+    return <div className="center">
+        <SongActualPage song={song} />
+    </div>
 }

app/globals.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 .center {
-  @apply flex flex-col items-center justify-center h-screen;
+  @apply flex flex-col items-center justify-center;
 }
 
 html {
@@ -23,7 +23,7 @@ html {
 }
 
 .artwork {
-  @apply p-4 mb-5;
+  @apply p-4 mt-10 mb-5;
 }
 
 .platform {
@@ -35,7 +35,7 @@ html {
 }
 
 .copyright {
-  @apply text-sm mt-2 text-center;
+  @apply text-sm text-center mt-5;
 }
 
 .apple {

app/layout.tsx

@@ -18,9 +18,9 @@ export default function RootLayout({
     <html>
       <head />
       <body className={`${inter.className}`}>
-        <div className="center">
+        <div className="center h-screen">
           {children}
-          <p className="copyright">Powered by MultiShare. Copyright © 2023, <Link href="https://mrquantumoff.dev">Demir Yerli.</Link></p>
+          <p className="copyright text-sm">This webpage is powered by MultiShare. Copyright © 2023, <Link href="https://mrquantumoff.dev">Demir Yerli.</Link></p>
           <AnalyticsWrapper></AnalyticsWrapper>
         </div>
       </body>

app/page.tsx

@@ -1,8 +1,10 @@
 export default function Home() {
   return (
-    <div className="text-2xl card">
-      <h1 className="text">This page is empty(</h1>
-      <h1 className="text">Multishare doesn&apos;t contain a main page, it only contains song pages</h1>
+    <div className="center h-screen">
+      <div className="text-2xl card">
+        <h1 className="text">This page is empty(</h1>
+        <h1 className="text">Multishare doesn&apos;t contain a main page, it only contains song pages</h1>
+      </div>
     </div>
   )
 }

package.json

@@ -9,8 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@next/font": "13.1.6",
     "@supabase/supabase-js": "^2.8.0",
-    "@types/node": "18.14.1",
+    "@types/node": "18.13.0",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@vercel/analytics": "^0.1.10",