Merge branch 'next' into chore/typescript-5

CONTRIBUTING.md

@@ -12,7 +12,7 @@ When contributing to `create-t3-app`, whether on GitHub or in other community sp
 
 In order to not waste your time implementing a change that has already been declined, or is generally not needed, start by [opening an issue](https://github.com/t3-oss/create-t3-app/issues/new/choose) describing the problem you would like to solve.
 
-### Contributing via Codesanbox
+### Contributing via Codesandbox
 
 You can contribute to this documentation on codesandbox which will automatically run all the setup command for you. [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/github/t3-oss/create-t3-app).
 

www/src/pages/zh-hans/other-recs.md

@@ -7,7 +7,7 @@ lang: zh-hans
 
 我们意识到 `create-t3-app` 所包含的库或工具并不能解决每一个问题。虽然我们鼓励你用我们提供的这些工具来创建项目，但有的时候你还是会需要用到其他库。只有你自己才能了解你的项目真正需要什么，不过这里有一份我们自己经常推荐的库或工具的清单，你大可参考一下。
 
-这些推荐来自于 create-t3-app 的个人贡献者们，不应该被视为 create-t3-app 团队或这个开源软件的“官方”认可。_**请自行搜索，尤其是在使用付费服务之前**_。
+这些推荐来自于 Create T3 App 的个人贡献者们，不应该被视为 Create T3 App 团队或这个开源软件的“官方”认可。_**请自行搜索，尤其是在使用付费服务之前**_。
 
 ## 状态管理
 
@@ -53,6 +53,7 @@ _**编者注词**_: 状态管理库本身很棒，但经常没有必要使用。
 
 - [Chakra UI](https://chakra-ui.com)
 - [Mantine](https://mantine.dev)
+- [@shadcn/ui](https://ui.shadcn.com/)
 
 ### Class Variance Authority
 

www/src/pages/zh-hans/usage/trpc.md

@@ -92,6 +92,36 @@ const UserPage = () => {
 
 你会立即感受到类型安全和自动补全带来的好处。只要当你输入 `api.` 时，你所定义的路由都会显示在自动补全的菜单里，然后当你选择了一个路由，它所包含的路由函数也会显示出来。如果你的输入不符合你在后端定义的验证器的要求，TypeScript 也会将错误显示出来。
 
+## 推断错误
+
+默认情况下，`create-t3-app` 设置了一个 [error formatter](https://trpc.io/docs/error-formatting)，让你在后端出现验证错误时可以推断出你的 Zod 错误。
+
+使用示例：
+
+```tsx
+function MyComponent() {
+  const { mutate, error } = api.post.create.useMutation();
+
+  return (
+    <form onSubmit={(e) => {
+      e.preventDefault();
+      const formData = new FormData(e.currentTarget);
+      mutate({ title: formData.get('title') });
+    }}>
+      <input name="title" />
+      {error?.data?.zodError?.fieldErrors.title && (
+        {/** `mutate` returned with an error on the `title` */}
+        <span className="mb-8 text-red-500">
+          {error.data.zodError.fieldErrors.title}
+        </span>
+      )}
+
+      ...
+    </form>
+  );
+}
+```
+
 ## 文件
 
 tRPC 需要不少样板代码，不过 `create-t3-app` 已经帮你完成。让我们看一下这些被自动创建的文件：
@@ -327,6 +357,22 @@ test("example router", async () => {
 });
 ```
 
+如果你的 procedure 是受保护的，你可以传入一个模拟的 `session` 对象来创建上下文：
+
+```ts
+test("protected example router", async () => {
+  const ctx = await createInnerTRPCContext({
+    session: {
+      user: { id: "123", name: "John Doe" },
+      expires: "1",
+    },
+  });
+  const caller = appRouter.createCaller(ctx);
+
+  // ...
+});
+```
+
 ## 有用的资源
 
 | 资源             | 链接                                                    |