GROK

既然你选择 Next.js，我为你设计一个简单的学习路径：

1. 基础：页面和路由

   • 在 pages/ 下创建新页面，如 about.tsx：

     export default function About() {
       return <h1>About Page</h1>;
     }
     

   • 访问 http://localhost:3000/about。

2. 动态路由

   • 创建 pages/post/[id].tsx：

     import { useRouter } from 'next/router';
     
     export default function Post() {
       const router = useRouter();
       const { id } = router.query;
       return <h1>Post ID: {id}</h1>;
     }
     

   • 访问 http://localhost:3000/post/123。

3. 组件和状态

   • 在 components/ 下创建 Counter.tsx：

     import { useState } from 'react';
     
     export default function Counter() {
       const [count, setCount] = useState(0);
       return (
         <div>
           <p>Count: {count}</p>
           <button onClick={() => setCount(count + 1)}>Add</button>
         </div>
       );
     }
     

   • 在 pages/index.tsx 中引入：

     import Counter from '../components/Counter';
     
     export default function Home() {
       return (
         <div>
           <h1>Welcome to Next.js!</h1>
           <Counter />
         </div>
       );
     }
     

4. API 路由

   • 创建 pages/api/hello.ts：

     import { NextApiRequest, NextApiResponse } from 'next';
     
     export default function handler(req: NextApiRequest, res: NextApiResponse) {
       res.status(200).json({ message: 'Hello from API!' });
     }
     

   • 访问 http://localhost:3000/api/hello。

• Next.js 优势：开箱即用的路由、SSR 和 API 支持，非常适合学习。

自学路径

• 创建项目
• 创建普通路由（/hello页面）
• 创建动态路由（/[id]页面）
• 解构赋值
• 服务端渲染页面/组件，搭配使用async和await。("use server")
• 客户端渲染页面/组件("use client")
• ts语法
• useState。为什么要使用？和直接定义变量有什么区别？
• Tailwind CSS（不写CSS，直接写在元素标签中）
• API路由
• Server Actions替代API路由，直接提交表单
• try catch
• useTransiton
• 数据持久化，服务端组件存储数据
• React组件大写，html标签小写
• type

进阶

• useRef
• useEffect
• 传递函数，统一状态

究极😅

• 直接让LLM写页面，自己当产品。