Next.js 集成指南

Plasmo 与 Next.js  实现了无缝集成。核心设计理念是：Plasmo 作为浏览器扩展的入口点，而 Next.js 作为 Web 应用的入口点，让您能够在代码库中高效复用组件，仅需少量适配即可实现跨平台开发。

兼容性特性

• TypeScript 配置兼容：Plasmo 暴露的 TypeScript 配置与 Next.js 完全兼容，包括支持使用 src 目录结构
• 环境变量支持：.env 文件 配置方式相同，但使用不同的命名空间前缀（PLASMO_PUBLIC 对比 NEXT_PUBLIC）
• 构建工具一致性：Plasmo 使用 Parcel 2  作为打包器，其底层基于 swc  - 与 Next.js 使用的打包器技术栈相同。这意味着您可以共享插件配置，如 postcss 和 tailwindcss，无需额外修改

快速开始

要查看完整的集成示例和最佳实践，请访问我们的 with-nextjs 示例仓库 。该示例展示了如何：

1. 在 Plasmo 扩展中复用 Next.js 组件
2. 配置共享的构建工具链
3. 管理跨平台的环境变量
4. 实现高效的开发工作流程

开发建议

• 组件复用策略：将通用业务逻辑组件放在共享目录中，平台特定组件分别放置在 components/extension 和 components/web 目录
• 样式管理：利用 PostCSS 和 Tailwind CSS 的共享配置，确保扩展和 Web 应用的样式一致性
• 构建优化：通过合理的代码分割策略，避免在扩展包中包含不必要的 Web 应用代码

通过这种集成方式，您可以充分发挥 Next.js 在 Web 应用开发中的优势，同时享受 Plasmo 在浏览器扩展开发中的便利性，实现真正的高效全栈开发体验。