[examples] Rename next.config.js to next.config.mjs

Also update the README to use ESM syntax in next config
mui · Jun 21, 2024 · 829aa50 · 829aa50
1 parent 659ed43
commit 829aa50
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -91,9 +91,9 @@ npm install --save-dev @pigment-css/nextjs-plugin
 Then, in your `next.config.js` file, import the plugin and wrap the exported config object:
 
 ```js
-const { withPigment } = require('@pigment-css/nextjs-plugin');
+import { withPigment } from '@pigment-css/nextjs-plugin';
 
-module.exports = withPigment({
+export default withPigment({
   // ... Your nextjs config.
 });
 ```
@@ -529,9 +529,9 @@ Theming is an **optional** feature that lets you reuse the same values, such as
 For example, in Next.js, you can define a theme in the `next.config.js` file like this:
 
 ```js
-const { withPigment } = require('@pigment-css/nextjs-plugin');
+import { withPigment } from '@pigment-css/nextjs-plugin';
 
-module.exports = withPigment(
+export default withPigment(
   {
     // ...other nextConfig
   },
@@ -567,12 +567,12 @@ const Heading = styled('h1')(({ theme }) => ({
 
 ### CSS variables support
 
-Pigment CSS can generate CSS variables from the theme values when you wrap your theme with `extendTheme` utility. For example, in a `next.config.js` file:
+Pigment CSS can generate CSS variables from the theme values when you wrap your theme with `extendTheme` utility. For example, in a `next.config.mjs` file:
 
 ```js
-const { withPigment, extendTheme } = require('@pigment-css/nextjs-plugin');
+import { withPigment, extendTheme } from '@pigment-css/nextjs-plugin';
 
-module.exports = withPigment(
+export default withPigment(
   {
     // ...nextConfig
   },
@@ -796,10 +796,10 @@ To support right-to-left (RTL) languages, add the `dir="rtl"` attribute to your
 ### Next.js
 
 ```js
-const { withPigment } = require('@pigment-css/nextjs-plugin');
+import { withPigment } from '@pigment-css/nextjs-plugin';
 
 // ...
-module.exports = withPigment(nextConfig, {
+export default withPigment(nextConfig, {
   theme: yourCustomTheme,
   // CSS output option
   css: {
@@ -1134,9 +1134,9 @@ Next, they must set up Pigment CSS in their project:
 
 ```js
 // framework config file, for example next.config.js
-const { withPigment } = require('@pigment-css/nextjs-plugin');
+import { withPigment } from '@pigment-css/nextjs-plugin';
 
-module.exports = withPigment(
+export default withPigment(
   {
     // ... Your nextjs config.
   },
@@ -1167,7 +1167,7 @@ Developers can customize the component's styles using the theme's `styleOverride
 For example, the custom theme below sets the background color of the statistics component's root slot to `tomato`:
 
 ```js
-module.exports = withPigment(
+export default withPigment(
   { ...nextConfig },
   {
     theme: {
@@ -1194,7 +1194,7 @@ module.exports = withPigment(
 Developers can also access theme values and apply styles based on the component's props using the `variants` key:
 
 ```js
-module.exports = withPigment(
+export default withPigment(
   { ...nextConfig },
   {
     theme: {

diff --git a/...ples/pigment-css-nextjs-ts/next.config.js → ...les/pigment-css-nextjs-ts/next.config.mjs b/...ples/pigment-css-nextjs-ts/next.config.js → ...les/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({
@@ -25,4 +25,4 @@ const theme = extendTheme({
 /** @type {import('next').NextConfig} */
 const nextConfig = {};
 
-module.exports = withPigment(nextConfig, { theme });
+export default withPigment(nextConfig, { theme });