docs: update nextjs & remix usage config

content/start/changelog/index-en-US.md

@@ -19,6 +19,10 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
 - 【Fix】
     - fix the incomplete type of TagInput showContentTooltip
     - fix the problem that the scroll bar behaves inconsistently when the TimePicker selection mode is normal and wheel [@frowhy](https://github.com/frowhy)
+-  【Docs】
+    - Update NextJs Project getting started
+    - Update Remix Project getting started
+
 #### 🎉 2.28.0-beta.1 (2023-01-17)
 - 【Feat】
     - Select adds expandRestTagsOnClick API, the default value is false, in the case of multiple selection and maxTagCount exists, the remaining tags can be displayed when the panel is opened [#1353](https://github.com/DouyinFE/semi-design/pull/1353)

content/start/changelog/index.md

@@ -19,6 +19,9 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 - 【Fix】
     - 修复 TagInput showContentTooltip 类型不完整问题
     - 修复 TimePicker 选择模式为 normal 和 wheel 时， 滚动条表现不一致问题 [@frowhy](https://github.com/frowhy)
+-  【Docs】
+    - 快速开始：更新 NextJs 项目接入指引
+    - 快速开始：更新 Remix 项目接入指引  
 
 #### 🎉 2.28.0-beta.1 (2023-01-17)
 - 【Feat】

content/start/getting-started/index-en-US.md

@@ -42,7 +42,7 @@ class Demo extends React.Component {
 
 > It is recommended to import [reset.css](https://www.npmjs.com/package/reset-css) into the project, which can avoid introducing the default style of the browser.
 
-## 3、Use in Next.js
+## 3. Use in Next.js
 - If you only use the default theme, you can add Semi-related packages to `transpilePackages` (Next.js version requires >= v13.1) . 
 ```diff
 // next.config.js
@@ -80,7 +80,58 @@ For example, when you want to use the theme package of the Douyin creation servi
 @import '~@semi-bot/semi-theme-doucreator/semi.min.css';
 ```
 
-## 4. Use UMD import in browser
+## 4. Use in Remix
+- @remix related package version requirements > 1.11.0, and install `@remix-run/css-bundle`
+
+- Configure `remix.config.js`, refer to [Remix Css Side-Effect Imports](https://remix.run/docs/en/v1/guides/styling#css-side-effect-imports). Turn on `unstable_cssSideEffectImports`, and configure Semi related packages in `serverDependenciesToBundle`.
+```diff
+// remix.config.js
+module.exports = {
+  future: {
++    unstable_cssSideEffectImports: true,
+  },
+  serverDependenciesToBundle: [
++    /^@douyinfe\/semi-ui/,
++    /^@douyinfe\/semi-icons/,
++    /^@douyinfe\/semi-illustrations/,
+  ],
+};
+
+```
+
+- Configure in `root.tsx`，refer to [Remix CSS Bundling](https://remix.run/docs/en/v1/guides/styling#css-bundling). Import `cssBundleHref` and configure `links`
+
+```diff
+// root.tsx
++ import { cssBundleHref } from "@remix-run/css-bundle";
+
+ export const links = () => {
+   return [
++     ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
+   ];
+ };
+```
+
+- After completing the configuration, you can use Semi components normally
+
+**How to use theme packages with Remix**  
+You can directly replace the `cssBundleHref` step with importing the built full css product in the theme package to replace the default theme css).  
+For example, when you want to apply the theme package `@semi-bot/semi-theme-doucreator` of the Douyin creation service platform Time
+
+```diff
+// root.tsx
++ import ThemeStyle from "@semi-bot/semi-theme-doucreator/semi.min.css";
+
+ export const links = () => {
+   return [
+-    ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),     
++    { rel: "stylesheet", href: ThemeStyle },
+   ];
+ };
+```
+
+
+## 5. Use UMD import in browser
 
 [![BUILD-JS][build-js-badge]][build-js-url] [![BUILD-CSS][build-css-badge]][build-css-url]
 

content/start/getting-started/index.md

@@ -79,7 +79,58 @@ module.exports = semi({
 @import '~@semi-bot/semi-theme-doucreator/semi.min.css';
 ```
 
-## 4、UMD 方式使用组件
+## 4、在 Remix 中使用
+- @remix相关包版本要求 > 1.11.0，并安装 `@remix-run/css-bundle`
+
+- 配置 `remix.config.js`，参考 [Remix Css Side-Effect Imports](https://remix.run/docs/en/v1/guides/styling#css-side-effect-imports)。打开 `unstable_cssSideEffectImports` 开关，并将 Semi 相关包配置在 `serverDependenciesToBundle` 中。
+```diff
+// remix.config.js
+module.exports = {
+  future: {
++    unstable_cssSideEffectImports: true,
+  },
+  serverDependenciesToBundle: [
++    /^@douyinfe\/semi-ui/,
++    /^@douyinfe\/semi-icons/,
++    /^@douyinfe\/semi-illustrations/,
+  ],
+};
+
+```
+
+- 在 `root.tsx` 中进行配置，参考[Remix CSS Bundling](https://remix.run/docs/en/v1/guides/styling#css-bundling)。引入 `cssBundleHref`，并配置 `links`
+
+```diff
+// root.tsx
++ import { cssBundleHref } from "@remix-run/css-bundle";
+
+ export const links = () => {
+   return [
++     ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
+   ];
+ };
+```
+
+- 完成配置，可以正常使用 Semi 相关组件 
+
+**如何在 Remix 中使用主题包**  
+可以直接将 cssBundleHref 这一步替换为引入主题包中已构建好的全量css 产物，代替默认主题css），例如当希望应用抖音创作服务平台的主题包 `@semi-bot/semi-theme-doucreator` 时
+
+```diff
+// root.tsx
++ import ThemeStyle from "@semi-bot/semi-theme-doucreator/semi.min.css";
+
+ export const links = () => {
+   return [
+-    ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),     
++    { rel: "stylesheet", href: ThemeStyle },
+   ];
+ };
+```
+
+
+
+## 5、UMD 方式使用组件
 
 [![BUILD-JS][build-js-badge]][build-js-url] [![BUILD-CSS][build-css-badge]][build-css-url]