feat: update packages

.prettierignore

@@ -4,7 +4,6 @@ package-lock.json
 public
 node_modules
 next-env.d.ts
-next.config.ts
 pnpm-lock.yaml
 .github
 .husky

README.md

@@ -46,6 +46,7 @@ For Next.js, check this: [Next.js 14 Boilerplate](https://github.com/qinsong77/N
 - How to test, the test strategy/architecture with RSC
 - in [table pagination demo](./app/pagination-demo/page.tsx), Suspense fallback will cover table pagination and header when paginate on client, how to show them when request on client
   - Fixed by using [useTransition](https://19.react.dev/reference/react/useTransition), refer: [Preventing unwanted loading indicators ](https://19.react.dev/reference/react/useTransition#preventing-unwanted-loading-indicators)
+- Remove `"react-is": "19.0.0-rc-1631855f-20241023"` in `package.json` for support React 19
 
 ## Best Practices
 

app/demos/page.tsx

@@ -4,8 +4,8 @@ import { logger } from '@/lib/shared'
 
 import { DropDown } from './_components/dropdown'
 
-// This part is important!
-export const dynamic = 'force-dynamic'
+// This part is important! no need for next 15
+// export const dynamic = 'force-dynamic'
 
 const fetchPokemon = async (poke: string) => {
   if (!poke) return null

app/loading-and-streaming/_components/client-component.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
 import { ToastAction } from '@/components/ui/toast'
-import { useToast } from '@/components/ui/use-toast'
+import { useToast } from '@/hooks/use-toast'
 
 export const ClientComponent = ({
   children,

app/loading-and-streaming/_components/prompt-activity.tsx

@@ -14,9 +14,7 @@ interface Joke {
 }
 async function getRandomJoke(): Promise<Joke> {
   logger.info('getRandomJoke start')
-  const res = await fetch('https://api.chucknorris.io/jokes/random', {
-    cache: 'no-store',
-  })
+  const res = await fetch('https://api.chucknorris.io/jokes/random')
   await sleep(1500)
 
   if (!res.ok) {

app/loading-and-streaming/_components/rsc-component.tsx

@@ -11,9 +11,7 @@ type RES = {
 
 async function getEggById(id: number): Promise<RES> {
   logger.info({ id }, 'getEggById start')
-  const res = await fetch(`https://pokeapi.co/api/v2/egg-group/${id}`, {
-    cache: 'no-store',
-  })
+  const res = await fetch(`https://pokeapi.co/api/v2/egg-group/${id}`)
   await sleep(1500)
 
   if (!res.ok) {

app/loading-and-streaming/action.ts

@@ -18,9 +18,7 @@ export type EggGroup = {
 
 export async function getEggGroup(): Promise<EggGroup> {
   logger.info('getEggGroup start')
-  const res = await fetch('https://pokeapi.co/api/v2/egg-group', {
-    cache: 'no-store',
-  })
+  const res = await fetch('https://pokeapi.co/api/v2/egg-group')
   await sleep(3000)
   if (!res.ok) {
     // This will activate the closest `error.js` Error Boundary

app/loading-and-streaming/page.tsx

@@ -32,9 +32,7 @@ type Res = {
 }
 async function getUserInfo(): Promise<Res> {
   logger.info('getUserInfo starting ')
-  const res = await fetch('https://randomuser.me/api/', {
-    cache: 'no-store',
-  })
+  const res = await fetch('https://randomuser.me/api/')
   await sleep(1000)
   logger.info(res, 'getUserInfo done')
 

components/ui/breadcrumb.tsx

@@ -80,7 +80,7 @@ const BreadcrumbSeparator = ({
   <li
     role="presentation"
     aria-hidden="true"
-    className={cn("[&>svg]:size-3.5", className)}
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
     {...props}
   >
     {children ?? <ChevronRight />}

components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {

components/ui/command.tsx

@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       className
     )}
     {...props}

components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

components/ui/toaster.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useToast } from "@/hooks/use-toast"
 import {
   Toast,
   ToastClose,
@@ -8,7 +9,6 @@ import {
   ToastTitle,
   ToastViewport,
 } from "@/components/ui/toast"
-import { useToast } from "@/components/ui/use-toast"
 
 export function Toaster() {
   const { toasts } = useToast()

components/ui/use-toast.ts → hooks/use-toast.ts

@@ -1,12 +1,9 @@
-"use client"
+'use client'
 
 // Inspired by react-hot-toast library
-import * as React from "react"
+import * as React from 'react'
 
-import type {
-  ToastActionElement,
-  ToastProps,
-} from "@/components/ui/toast"
+import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
@@ -18,11 +15,12 @@ type ToasterToast = ToastProps & {
   action?: ToastActionElement
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
 } as const
 
 let count = 0
@@ -36,20 +34,20 @@ type ActionType = typeof actionTypes
 
 type Action =
   | {
-      type: ActionType["ADD_TOAST"]
+      type: ActionType['ADD_TOAST']
       toast: ToasterToast
     }
   | {
-      type: ActionType["UPDATE_TOAST"]
+      type: ActionType['UPDATE_TOAST']
       toast: Partial<ToasterToast>
     }
   | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
+      type: ActionType['DISMISS_TOAST']
+      toastId?: ToasterToast['id']
     }
   | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
+      type: ActionType['REMOVE_TOAST']
+      toastId?: ToasterToast['id']
     }
 
 interface State {
@@ -66,7 +64,7 @@ const addToRemoveQueue = (toastId: string) => {
   const timeout = setTimeout(() => {
     toastTimeouts.delete(toastId)
     dispatch({
-      type: "REMOVE_TOAST",
+      type: 'REMOVE_TOAST',
       toastId: toastId,
     })
   }, TOAST_REMOVE_DELAY)
@@ -76,21 +74,21 @@ const addToRemoveQueue = (toastId: string) => {
 
 export const reducer = (state: State, action: Action): State => {
   switch (action.type) {
-    case "ADD_TOAST":
+    case 'ADD_TOAST':
       return {
         ...state,
         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
       }
 
-    case "UPDATE_TOAST":
+    case 'UPDATE_TOAST':
       return {
         ...state,
         toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
         ),
       }
 
-    case "DISMISS_TOAST": {
+    case 'DISMISS_TOAST': {
       const { toastId } = action
 
       // ! Side effects ! - This could be extracted into a dismissToast() action,
@@ -111,11 +109,11 @@ export const reducer = (state: State, action: Action): State => {
                 ...t,
                 open: false,
               }
-            : t
+            : t,
         ),
       }
     }
-    case "REMOVE_TOAST":
+    case 'REMOVE_TOAST':
       if (action.toastId === undefined) {
         return {
           ...state,
@@ -140,20 +138,20 @@ function dispatch(action: Action) {
   })
 }
 
-type Toast = Omit<ToasterToast, "id">
+type Toast = Omit<ToasterToast, 'id'>
 
 function toast({ ...props }: Toast) {
   const id = genId()
 
   const update = (props: ToasterToast) =>
     dispatch({
-      type: "UPDATE_TOAST",
+      type: 'UPDATE_TOAST',
       toast: { ...props, id },
     })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
 
   dispatch({
-    type: "ADD_TOAST",
+    type: 'ADD_TOAST',
     toast: {
       ...props,
       id,
@@ -187,8 +185,8 @@ function useToast() {
   return {
     ...state,
     toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
   }
 }
 
-export { useToast, toast }
+export { toast, useToast }

next.config.js → next.config.ts

@@ -1,4 +1,5 @@
 import withBundleAnalyzer from '@next/bundle-analyzer'
+import type { NextConfig } from 'next'
 
 const isProd = process.env.NODE_ENV === 'production'
 
@@ -8,8 +9,7 @@ const bundleAnalyzer = withBundleAnalyzer({
   analyzerMode: 'static',
 })
 
-/** @type {import('next').NextConfig} */
-const nextConfig = bundleAnalyzer({
+const nextConfig: NextConfig = bundleAnalyzer({
   reactStrictMode: true,
   output: 'standalone',
   distDir: isProd ? 'dist' : '.next',
@@ -25,6 +25,11 @@ const nextConfig = bundleAnalyzer({
     // https://nextjs.org/docs/api-reference/next.config.js/ignoring-typescript-errors
     ignoreBuildErrors: true,
   },
+  experimental: {
+    staticGenerationRetryCount: 1,
+    staticGenerationMaxConcurrency: 8,
+    staticGenerationMinPagesPerWorker: 25,
+  },
 })
 
 export default nextConfig