Quickstart: Next.js

Quickstart with Next.js

Plasmo seamlessly integrates with Next.js. 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 which uses swc underneath - the same bundler that Next.js uses. Thus, you can share plugin configs such as postcss and tailwindcss without modification.

See with-nextjs for an example!