init

Author: AdnanShah

app/client/page.js

@@ -0,0 +1,26 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export default function Client(props) {
+  console.log('🚀 ~ file: page.js:6 ~ props')
+
+  useEffect(() => {
+    console.log('============ client page =================')
+  })
+  if (props.children) {
+    return (
+      <>
+        <h1>client Page</h1>
+        {props.children}
+      </>
+    )
+  }
+  return <h1>client Page</h1>
+}
+
+// getServerSideProps is not supported
+
+// export async function getServerSideProps() {
+//   return { props: { data: [{ key: 'value', key1: 'value1', key2: 'value2' }] } }
+// }

app/components/home.js

@@ -0,0 +1,20 @@
+export default function Home({ data }) {
+  console.log('🚀 ~ app => components => Home (server component)')
+
+  if (!data) {
+    return <>loading...</>
+  }
+
+  return (
+    <div>
+      {data.map((game, index) => {
+        return (
+          <div key={game?.id}>
+            <h1>{game?.name}</h1>
+            <h3>{game?.genre}</h3>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

app/item/[id]/page.js

@@ -0,0 +1,16 @@
+import Client from '../client/page'
+import Server from '../server/page'
+
+export default function MixMatchPage() {
+  console.log('🚀 ~ file: page.js:5 ~ MixMatchPage')
+  return (
+    <div>
+      <h1>Mix Pages</h1>
+      <div className="box-blue">
+        <Client>
+          <Server />
+        </Client>
+      </div>
+    </div>
+  )
+}

app/item/not-found.js

@@ -0,0 +1,26 @@
+import Home from "../components/home"
+
+async function getData() {
+  const res = await fetch(
+    `https://5fbc07c3c09c200016d41656.mockapi.io/api/v1/games`
+  )
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch data')
+  }
+
+  console.log('🚀  fetch on server data')
+  return res.json()
+}
+
+export default async function Server() {
+  console.log('============== Server page ======================')
+  const data = await getData()
+
+  return (
+    <>
+      <h1>Server Page</h1>
+      <Home data={data} />
+    </>
+  )
+}

app/mix/page.js

@@ -5,6 +5,7 @@ import Link from 'next/link'
 import styles from './header.module.css'
 
 export default function Header() {
+  console.log('🚀 ~ file: header.js:8 ~ Header')
   return (
     <header className={styles.header}>
       <div className={styles.left}>

app/news/[page]/page.js

@@ -1,4 +1,4 @@
-module.exports = {
+const nextConfig = {
   experimental: {
     appDir: true
   },
@@ -11,3 +11,9 @@ module.exports = {
     ]
   }
 }
+
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true'
+})
+
+module.exports = withBundleAnalyzer(nextConfig)

app/server/page.js

@@ -1,11 +1,12 @@
 {
-  "packageManager": "[email protected]",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "build:analyze": "ANALYZE=true  next build",
     "start": "next start"
   },
   "dependencies": {
+    "@next/bundle-analyzer": "^13.1.6",
     "ms": "2.1.3",
     "next": "^13.1.0",
     "react": "^18.3.0-next",

components/header.js

@@ -0,0 +1,25 @@
+import Client from '../app/client/page'
+import Home from '../app/components/home'
+
+export default function Page({ data }) {
+  console.log('🚀 pages => index.js')
+
+  return (
+    <>
+      <h1>Client component (getServerSideProps)</h1>
+      <Client>
+        <Home data={data} />
+      </Client>
+    </>
+  )
+}
+
+export async function getServerSideProps() {
+  const res = await fetch(
+    `https://5fbc07c3c09c200016d41656.mockapi.io/api/v1/games`
+  )
+
+  const data = await res.json()
+
+  return { props: { data } }
+}