
## Using a starter

The easiest way to get started is to use the [nextjs-starter](https://github.com/reflexjs/nextjs-starter) template. This sets up everything automatically for you.

```sh
npx create-next-app -e https://github.com/reflexjs/nextjs-starter
```

Once your site is ready, you can run `yarn dev` to start the development environment.

## Add to existing site

If you're starting from scratch, create a new Next.js project using [create-next-app](https://nextjs.org/docs/api-reference/create-next-app):

```sh
npx create-next-app
# or
yarn create next-app
```

You can also add Reflexjs to an existing Nextjs site.

### Install dependencies

Add reflexjs to your site.

```sh
npm i reflexjs
# or
yarn add reflexjs
```

### Create a theme

Generate a theme using the Reflexjs CLI utility.

```sh
npx reflexjs --preset base
```

This will create a `theme.js` file using the _base_ preset at the root of your project.

### Update \_app.js

Create `src/pages/_app.js` with the following code:

```jsx title=src/pages/_app.js
import { ThemeProvider } from "reflexjs" // highlight-line
import theme from "../src/theme" // highlight-line

export default function App({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}
```

### Update \_document.js

Add `InitializeColorMode` to `src/pages/_document.js`

```jsx title=src/pages/_document.js
import Document, { Html, Main, NextScript, Head } from "next/document"
import { InitializeColorMode } from "reflexjs" // highlight-line

export default class extends Document {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <InitializeColorMode /> // highlight-line
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
```

### Add the Babel preset

Reflexjs uses a custom `jsx` pragma to convert style props. To enable this pragma, create a `.babelrc` file at the root of your project with the following:

```json
{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "reflexjs"
        }
      }
    ]
  ]
}
```

<Callout>
  
This preset automatically sets the `jsx` pragma for you so that you don't need to import it in individual files

If you prefer manually enabling it, you can set the pragma in your file as follow:

```tsx title=pages/index.tsx
/** @jsxImportSource "reflexjs" */

export default function IndexPage() {
  return <p variant="text">Hello World!</p>
}
```

</Callout>

You are now ready to start the development server using `yarn dev`.


Next.js

Using a starter

Install dependencies

Next.js

Using a starter

Add to existing site

Install dependencies

Create a theme

Update _app.js

Update _document.js

Add the Babel preset