diff --git a/apps/pigment-css-next-app/next.config.js b/apps/pigment-css-next-app/next.config.mjs
similarity index 92%
rename from apps/pigment-css-next-app/next.config.js
rename to apps/pigment-css-next-app/next.config.mjs
index d37a09f1..b8b74ab3 100644
--- a/apps/pigment-css-next-app/next.config.js
+++ b/apps/pigment-css-next-app/next.config.mjs
@@ -1,7 +1,5 @@
-/* eslint-env node */
-// eslint-ignore-next-line import/no-unresolved
-const { withPigment } = require('@pigment-css/nextjs-plugin');
-const { experimental_extendTheme: extendTheme } = require('@mui/material/styles');
+import { withPigment } from '@pigment-css/nextjs-plugin';
+import { experimental_extendTheme as extendTheme } from '@mui/material';
 
 /**
  * @typedef {import('@pigment-css/nextjs-plugin').PigmentOptions} PigmentOptions
@@ -121,4 +119,4 @@ const nextConfig = {
   pigment: pigmentOptions,
 };
 
-module.exports = withPigment(nextConfig);
+export default withPigment(nextConfig);
diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json
index f885ae80..510b60e3 100644
--- a/apps/pigment-css-next-app/package.json
+++ b/apps/pigment-css-next-app/package.json
@@ -2,6 +2,7 @@
   "name": "@app/next-app",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
diff --git a/examples/pigment-css-nextjs-ts/next.config.js b/examples/pigment-css-nextjs-ts/next.config.mjs
similarity index 68%
rename from examples/pigment-css-nextjs-ts/next.config.js
rename to examples/pigment-css-nextjs-ts/next.config.mjs
index d4d099ff..f326189c 100644
--- a/examples/pigment-css-nextjs-ts/next.config.js
+++ b/examples/pigment-css-nextjs-ts/next.config.mjs
@@ -1,4 +1,4 @@
-const { withPigment, extendTheme } = require('@pigment-css/nextjs-plugin');
+import { withPigment, extendTheme } from '@pigment-css/nextjs-plugin';
 
 // To learn more about theming, visit https://github.com/mui/pigment-css/blob/master/README.md#theming
 const theme = extendTheme({
@@ -22,7 +22,11 @@ const theme = extendTheme({
   },
 });
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
+/** @type {import('@pigment-css/nextjs-plugin').WithPigmentOptions} */
+const nextConfig = {
+  pigment: {
+    theme,
+  },
+};
 
-module.exports = withPigment(nextConfig, { theme });
+module.exports = withPigment(nextConfig);