Merge pull request #34 from wedinc/feat/migrate-to-app-router-part1

Migration part1
wedinc · Dec 4, 2023 · 3b02779 · 3b02779
2 parents f619e2c + 1d6e0e4
commit 3b02779
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 59 deletions.
diff --git a/app/_components/SignoutButton.tsx b/app/_components/SignoutButton.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import { signOut } from "next-auth/react"
+
+const SignoutButton = () => {
+ return (
+ <button className='btn btn-secondary' onClick={() => signOut()}>
+ Sign out
+ </button>
+ )
+}
+
+export default SignoutButton
diff --git a/app/caramel/page.tsx b/app/caramel/page.tsx
@@ -0,0 +1,30 @@
+import ListItem, { ListItemProps } from '@/components/ListItem'
+import Link from 'next/link'
+import SignoutButton from '../_components/SignoutButton'
+
+export default async function Caramel() {
+ const res = await fetch('https://hacker-news.firebaseio.com/v0/newstories.json')
+ const ids: number[] = await res.json()
+
+ const slicedIds = ids.slice(0, 10)
+ const articles = await Promise.all(slicedIds.map(async (id) => {
+ const res = await fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json`)
+ return await res.json() as ListItemProps
+ }))
+
+ return (
+ <div className='bg-[#bc611e] p-8'>
+ <h1 className='text-3xl font-bold underline text-gray-300'>Hello Caramel!</h1>
+ <Link href='/' className='btn btn-primary'>
+ Back
+ </Link>
+ <ul className='flex flex-col gap-4 w-1/3'>
+ {articles.map((article) => {
+ const newArticle = { ...article, title: article.title.repeat(2) }
+ return <ListItem {...newArticle} key={newArticle.title} className='h-36' />
+ })}
+ </ul>
+ <SignoutButton />
+ </div>
+ )
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,18 @@
+export const metadata = {
+ title: 'Next.js',
+ description: 'Generated by Next.js',
+}
+
+import '../styles/globals.css'
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+ <html lang="en">
+ <body>{children}</body>
+ </html>
+ )
+}
diff --git a/pages/index.tsx → app/page.tsx b/pages/index.tsx → app/page.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import { signOut } from 'next-auth/react'
+import SignoutButton from './_components/SignoutButton'
 
 export default function Home() {
  return (
@@ -8,10 +8,7 @@ export default function Home() {
  <Link href='/caramel' className='btn btn-primary'>
  Caramel
  </Link>
-
- <button className='btn btn-secondary' onClick={() => signOut()}>
- Sign out
- </button>
+ <SignoutButton />
  </>
  )
 }
diff --git a/pages/caramel/index.tsx b/pages/caramel/index.tsx
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,11 @@
 {
  "compilerOptions": {
  "target": "es5",
- "lib": ["dom", "dom.iterable", "esnext"],
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
  "allowJs": true,
  "skipLibCheck": true,
  "strict": true,
@@ -16,9 +20,23 @@
  "incremental": true,
  "baseUrl": ".",
  "paths": {
- "@/*": ["./*"]
- }
+ "@/*": [
+ "./*"
+ ]
+ },
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ]
  },
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
- "exclude": ["node_modules"]
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
 }