feat: update packages and README

.eslintrc.cjs

@@ -8,7 +8,7 @@ module.exports = {
   extends: [
     // 'next/core-web-vitals',
     'next',
-    'plugin:unicorn/recommended',
+    // 'plugin:unicorn/recommended',
     'next/typescript', // or use 'plugin:@typescript-eslint/recommended-type-checked'
     'plugin:tailwindcss/recommended',
     'plugin:prettier/recommended',
@@ -21,8 +21,8 @@ module.exports = {
 
     // 'react-compiler/react-compiler': 'error',
 
-    'unicorn/no-array-reduce': 'off',
-    'unicorn/no-null': 'off',
+    // 'unicorn/no-array-reduce': 'off',
+    // 'unicorn/no-null': 'off',
   },
   settings: {
     tailwindcss: {

README.md

@@ -2,7 +2,7 @@
 
 This is a [Next.js](https://nextjs.org/) 15 Boilerplate project base on [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-For Next.js, check this: [Next.js 14 Boilerplate](https://github.com/qinsong77/Next-js-Boilerplate/tree/nextjs14-v2)
+For Next.js 14, check this: [Next.js 14 Boilerplate](https://github.com/qinsong77/Next-js-Boilerplate/tree/nextjs14-v2)
 
 ## Features
 
@@ -39,47 +39,61 @@ For Next.js, check this: [Next.js 14 Boilerplate](https://github.com/qinsong77/N
 
 - i18n
 - ~~E2E test~~
-- Zustand, too simplify, maybe RTK if needed
+- Zustand, too simplify, maybe RTK or [xstate](https://stately.ai/docs/xstate-react) if needed
 - after gpr, run pnpm install automatically
 - how to update rsc in client?
-- Update to Next.js 15
+  ~~- Update to Next.js 15~~
 - 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
+- ~~Remove `"react-is": "19.0.0-rc-1631855f-20241023"` in `package.json` for support React 19~~
+- eslint v9
 
 ## Best Practices
 
 - `server-only`, [Keeping Server-only Code out of the Client Environment](https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment)
 
-## Libraries
+### Practices Refers
+
+- [next authentication](https://www.robinwieruch.de/next-authentication/)
+- [How to Set Up Next.js 15 for Production in 2024](https://www.reactsquad.io/blog/how-to-set-up-next-js-15-for-production)
+
+### Good Articles
+
+- [How to fetch data in React [2024]](https://www.robinwieruch.de/react-fetching-data/)
+- [Component composition is great btw](https://tkdodo.eu/blog/component-composition-is-great-btw)
+
+## Later Enhancement Libraries
 
 - [nuqs](https://github.com/47ng/nuqs) Type-safe search params state manager for Next.js - Like React.useState, but stored in the URL query string.
 - [next-safe-action](https://github.com/TheEdoRan/next-safe-action) Type safe and validated Server Actions in your Next.js project.
-- [magic ui](https://magicui.design)
+- [eslint-plugin-unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn) strict lint rules for a more consistent codebase.
 
-## Practices Refers
+### fancy components
 
-- [next authentication](https://www.robinwieruch.de/next-authentication/)
-- [How to Set Up Next.js 15 for Production in 2024](https://www.reactsquad.io/blog/how-to-set-up-next-js-15-for-production)
+- [shadcn/ui](https://ui.shadcn.com/)
+- [MagicUI](https://www.magicui.com/)
+- [fancycomponents](https://www.fancycomponents.dev/docs/introduction)
+- [reactbits](https://www.reactbits.dev/)
 
 ## Know issues
 
-- Standalone building output can't run if copy it's folder, cause pnpm `symlink`, node_module cant resolve correctly. It can be avoided by installing the package with `node-linker=hoisted` in the pnpm configuration before standalone output.
+- Standalone building output can't run if copy its folder, cause pnpm `symlink`, `node_module` cant resolve correctly. It can be avoided by installing the package with `node-linker=hoisted` in the pnpm configuration before standalone output.
 
 ## Refers
 
 - [Next.js App Router Playground](https://github.com/vercel/app-playground)
 - [nodejs.org doc web repo](https://github.com/nodejs/nodejs.org/tree/main)
 - [Next.js Full Stack App Architecture Guide](https://arno.surfacew.com/posts/en/nextjs-architecture)
 
-### Good article
+## LLM Guide
 
-- [How to fetch data in React [2024]](https://www.robinwieruch.de/react-fetching-data/)
+- V0
+- Cursor
 
-## Cursor
+### Cursor
 
-### Guideline
+#### Guideline
 
 1. Brainstorm first, code second
 
@@ -93,6 +107,7 @@ Claude/o1 are your best friends here. You should create a whole document contain
 - landing page components
 - color palette
 - copyrighting
+- etc.
 
 All this should be put into an instruction.md (name it however you want) so Cursor can index at any time.
 
@@ -137,6 +152,8 @@ Go to Cursor Settings > Features > Docs
 
 Paste the links and use them inside chat/composer with `@Docs`
 
+---
+
 ## Getting Started
 
 First, run the development server:

app/loading-and-streaming/page.tsx

@@ -46,7 +46,6 @@ async function getUserInfo(): Promise<Response> {
   return await response.json()
 }
 const Page = async () => {
-  // eslint-disable-next-line unicorn/no-await-expression-member
   const data = (await getUserInfo())?.results?.[0] ?? {}
 
   return (

components/__tests__/__snapshots__/data-table.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`[component]-DataTable > renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class=""
+    class="grid"
   >
     <div
       class="relative overflow-hidden border-b"