npm run dev
# or
yarn dev
# or
pnpm dev

git remote -v 查看当前仓库源
git remote set-url --add origin https://gitee.com/BruceLluo/my-threads.git

npx create-next-app@latest ./

npm install @clerk/nextjs @uploadthing/react mongoose svix uploadthing tailwindcss-animate @clerk/theme

使用next router 路由组，这允许您将路线段和项目文件组织到逻辑组中，而不影响 URL 路径结构。还可以嵌套路由，多个layout
(auth)->sign-in->sign-out

[https://app.logo.com/dashboard/logo_4a0f393c-f0be-42c7-93f0-169ba515c728/your-logo-files]设置自己logo
[https://favicon.io/favicon-converter/] 生成icon
引入clerk组件
   {/* clerk退出登录组件 */}
        <div className='block md:hidden'>
          <SignedIn>
            <SignOutButton>
              <div className='flex cursor-pointer'>
                <Image
                  src='/assets/logout.svg'
                  alt='logout'
                  width={24}
                  height={24}
                />
              </div>
            </SignOutButton>
          </SignedIn>
        </div>

        {/* clerk组织组件 */}
        <OrganizationSwitcher
          appearance={{
            baseTheme: dark,
            elements: {
              organizationSwitcherTrigger: "py-2 px-4",
            },
          }}
        />

import { usePathname, useRouter } from "next/navigation";

useRouter，usePathname获取路由信息

AccountProfile.tsx
引入shadcn ui 创建表单
npx shadcn-ui@latest init
npx shadcn-ui@latest add form input textarea

引入react-hook-form进行表单校验
引入zod 进行ts声明数据类型校验
引入uploadthing进行头像等资源上传，免费2g

使用nextjs中的server action 实验版
函数在服务器运行，但是可以在客户端调用
user.actions.ts中连接mongoose数据库，mongoosedb network access 设置允许所有ip 0.0.0.0./0
使用next的revalidatePath重新验证数据，并更新页面内容

提交表单上传头像，数据插入数据库
onboarding 同步数据库数据

npx shadcn-ui@latest add tabs 
ThreadsTab
还有replies,tagged

api/webhook/clerk/route