[React] 在Next.js 13中运行Python
有时候当我告诉别人时，他们会感到惊讶，但事实上，Next.js中可以运行Python环境。
在浏览器上使用Python环境的Pyodide得益于WASM技术，而在React中使用时，也存在提供方便的钩子功能的npm包react-py。
与上一篇文章相同，这是一个仅在客户端工作的机制，但是这次我打算使用Next.js 13的客户端组件功能来更加清晰地处理导入等操作。
今天的流程将会是这样的：
-
- 从Next.js 13（TypeScript）的模板开始
准备一个能够输入和执行Python代码的组件，使用react-py
使用Chakra来简化并改善界面外观的方法
从Next.js 13（TypeScript）的模板开始
现在，Next.js 13和TypeScript会自动安装。
yarn create next-app
当然也可以使用npm、pnpm或者其他工具。本文将使用yarn进行示范。
另外，我认为你可能需要在各种情况下做出选择，但我会分享与默认选项不同的自己的选择：
-
- Would you like to use Tailwind CSS with this project? › No
-
- Chakraを使う予定でしたので、Tailwindは不要だと思いました（Python環境の部分に影響ありません）
-
- Would you like to customize the default import alias? › Yes
-
- What import alias would you like configured? … @/*
- プロジェクト内のコンポーネントがインポートしやすくなります（Python環境の部分に影響ありません）
使用react-py为Python代码准备一个能够输入和执行的组件。
首先让我们安装react-py。
yarn add react-py
在文档中，只介绍了Next.js 13中在客户端组件中的使用方式。但在Next.js 12中，可以使用next/dynamic进行导入。如果您想在现有项目中直接使用react-py，请参考关于Next.js + p5.js的文章。方法是相同的。
我想介紹一下在这次中故意使用了最新的Next.js 13、更简单的方法。刚才我已经提供了文档链接，但首先让我们在想要使用Python环境的组件或页面的第一行添加’use client’以创建一个客户端组件。客户端组件将不再是Next.js在服务器端生成的对象，所以将不再需要next/dynamic等组件。
插入Python提供者
我们将页面或组件的顶部设置为类似Python的客户端组件。
'use client'
import { PythonProvider } from 'react-py'
让我们将该Python Provider添加到本页面的输出中。请将其包围在使用react-py的hook的组件周围。
export default function Home() {
return (
<PythonProvider>
<main>
<Codeblock />
</main>
</PythonProvider>
)
}
Codeblock将成为本教程的任意组件。
代码块组件 (Codeblock组件)
我认为React-py有很多用途，但这次让我们按照文档的通知，将
