[examples] Switch Next.js examples to ESM, remove unnecessary type

README.md

@@ -87,21 +87,21 @@ npm install @pigment-css/react
 npm install --save-dev @pigment-css/nextjs-plugin
 ```
 
-Then, in your `next.config.js` file, import the plugin and wrap the exported config object:
+Then, in your `next.config.mjs` 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({
-  // ... Your nextjs config.
+export default withPigment({
+  // ... Your Next.js config.
 });
 ```
 
 Finally, import the stylesheet in the root `layout.tsx` file:
 
 ```diff
- import type { Metadata } from 'next';
 +import '@pigment-css/react/styles.css';
+ import type { Metadata } from 'next';
 
  export const metadata: Metadata = {
    title: 'Create Next App',
@@ -525,12 +525,12 @@ Theming is an **optional** feature that lets you reuse the same values, such as
 >
 > The **theme** object is used at build time and does not exist in the final JavaScript bundle. This means that components created using Pigment CSS's `styled` can be used with React Server Components by default while still getting the benefits of theming.
 
-For example, in Next.js, you can define a theme in the `next.config.js` file like this:
+For example, in Next.js, you can define a theme in the `next.config.mjs` 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
   },
@@ -566,12 +566,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
   },
@@ -729,10 +729,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: {
@@ -1066,10 +1066,10 @@ npm install -D @pigment-css/nextjs-plugin
 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');
+// framework config file, for example next.config.mjs
+import { withPigment } from '@pigment-css/nextjs-plugin';
 
-module.exports = withPigment(
+export default withPigment(
   {
     // ... Your nextjs config.
   },
@@ -1100,7 +1100,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: {
@@ -1127,7 +1127,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: {

examples/pigment-css-nextjs-ts/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/pigment-css-nextjs-ts/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -23,7 +24,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
 # local env files
 .env*.local
@@ -33,4 +33,4 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-# next-env.d.ts
+next-env.d.ts

examples/pigment-css-nextjs-ts/src/app/layout.tsx → examples/pigment-css-nextjs-ts/app/layout.tsx

@@ -1,16 +1,17 @@
-import * as React from 'react';
-import type { Metadata } from 'next';
 import '@pigment-css/react/styles.css';
-import { css } from '@pigment-css/react';
-
 import './globals.css';
+import type { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
 };
 
-export default function RootLayout(props: { children: React.ReactNode }) {
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
   return (
     <html lang="en">
       <body

examples/pigment-css-nextjs-ts/src/app/page.tsx → examples/pigment-css-nextjs-ts/app/page.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import { styled, css, keyframes } from '@pigment-css/react';
+import { css, keyframes, styled } from '@pigment-css/react';
 
 const scale = keyframes({
   to: { scale: 'var(--s2)' },

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

examples/pigment-css-nextjs-ts/tsconfig.json

@@ -1,15 +1,13 @@
 {
   "compilerOptions": {
-    "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
-    "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
@@ -21,7 +19,7 @@
     ],
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],