diff --git a/README.md b/README.md
index 6dc7ac1ad..392b9afef 100644
--- a/README.md
+++ b/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: {
diff --git a/examples/pigment-css-nextjs-ts/.eslintrc.json b/examples/pigment-css-nextjs-ts/.eslintrc.json
new file mode 100644
index 000000000..bffb357a7
--- /dev/null
+++ b/examples/pigment-css-nextjs-ts/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+ "extends": "next/core-web-vitals"
+}
diff --git a/examples/pigment-css-nextjs-ts/.gitignore b/examples/pigment-css-nextjs-ts/.gitignore
index 28c8a5adb..fd3dbb571 100644
--- a/examples/pigment-css-nextjs-ts/.gitignore
+++ b/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
diff --git a/examples/pigment-css-nextjs-ts/src/app/favicon.ico b/examples/pigment-css-nextjs-ts/app/favicon.ico
similarity index 100%
rename from examples/pigment-css-nextjs-ts/src/app/favicon.ico
rename to examples/pigment-css-nextjs-ts/app/favicon.ico
diff --git a/examples/pigment-css-nextjs-ts/src/app/globals.css b/examples/pigment-css-nextjs-ts/app/globals.css
similarity index 100%
rename from examples/pigment-css-nextjs-ts/src/app/globals.css
rename to examples/pigment-css-nextjs-ts/app/globals.css
diff --git a/examples/pigment-css-nextjs-ts/src/app/layout.tsx b/examples/pigment-css-nextjs-ts/app/layout.tsx
similarity index 83%
rename from examples/pigment-css-nextjs-ts/src/app/layout.tsx
rename to examples/pigment-css-nextjs-ts/app/layout.tsx
index fb3a3b8ad..93dfe4149 100644
--- a/examples/pigment-css-nextjs-ts/src/app/layout.tsx
+++ b/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 (