Quickstart with Next.js

Plasmo seamlessly integrates with Next.js (opens in a new tab). The key idea is that Plasmo is your extension's entry point, and Next.js is your web application's entry point, allowing you to reuse your component across your codebase with minor adjustments.

List of compatibilities:

• The TypeScript configuration exposed by Plasmo is compatible with Next.js, including the ability to use the src directory.
• The .env file is the same, but uses a different namespace (PLASMO_PUBLIC vs NEXT_PUBLIC)
• Plasmo uses Parcel 2 (opens in a new tab) which uses swc (opens in a new tab) underneath - the same bundler that Next.js uses. Thus, you can share plugin configs such as postcss and tailwindcss without modification.

See with-nextjs (opens in a new tab) for an example!