# Next.js
Source: https://plumeria.dev/docs/integration/next
[`examples/nextjs`](https://github.com/zss-in-js/plumeria/tree/main/examples/example-nextjs) shows how to use [`@plumeria/next-plugin`](https://www.npmjs.com/package/@plumeria/next-plugin) in Next.js.\
It compiles styles into CSS via AST parsing, with HMR support.
## Installation [#installation]
```sh title="Terminal"
npm i --save-dev @plumeria/next-plugin
```
```sh title="Terminal"
yarn add -D @plumeria/next-plugin
```
```sh title="Terminal"
pnpm i --save-dev @plumeria/next-plugin
```
## next.config.ts [#nextconfigts]
`withPlumeria` works with both Turbopack and Webpack.
```ts title="next.config.ts"
import type { NextConfig } from "next";
import { withPlumeria } from "@plumeria/next-plugin";
const nextConfig: NextConfig = {
/* config options here */
};
export default withPlumeria(nextConfig);
```
`withPlumeria` accepts a second argument for compiler options:
```ts title="next.config.ts"
export default withPlumeria(nextConfig, {
include: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
exclude: ['**/node_modules/**', '**/.next/**'],
styleProp: 'sx',
});
```
* `include` — Globs the stylesheet is compiled from. The default is every `js/jsx/ts/tsx` file.
* `exclude` — Globs excluded from that compilation. The default is `node_modules`, `dist` and `.next`.
* `styleProp` — The JSX prop that carries styles. The default is `'classStyle'`.
These are the options a project usually sets. `withoutLogicalProperties` and `withoutPhysicalProperties` reject one spelling of a property that carries both names, so the pair cannot be written; see [@plumeria/next-plugin](/docs/api-reference/plugins/next-plugin) for every option and its type.
## plumeria.d.ts [#plumeriadts]
`@plumeria/core` ships no prop declaration of its own, so name the styling prop your project compiles with.
For the default name (`classStyle`), reference the declaration that ships with the package:
```ts title="plumeria.d.ts"
///
```
If you set a custom `styleProp` (such as `'sx'`), declare the same name for TypeScript instead:
```ts title="plumeria.d.ts"
import type { Style } from '@plumeria/core';
declare global {
namespace React {
interface HTMLAttributes {
sx?: Style;
}
interface SVGAttributes {
sx?: Style;
}
}
}
```
The `styleProp` in `next.config.ts` and the property name in `plumeria.d.ts` must match. If they disagree, the prop type-checks but is never compiled away.