DocumentationBlocks LibraryGuidesGitHub


Add Reflexjs to a Next.js project.

Using a starter

The easiest way to get started is to use the nextjs-starter template. This sets up everything automatically for you.

npx create-next-app -e

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:

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.

npm i reflexjs
# or
yarn add reflexjs

Create a theme

Generate a theme using the Reflexjs CLI utility.

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:

import { ThemeProvider } from "reflexjs"
import theme from "../src/theme"
export default function App({ Component, pageProps }) {
return (
<ThemeProvider theme={theme}>
<Component {...pageProps} />

Update _document.js

Add InitializeColorMode to src/pages/_document.js

import Document, { Html, Main, NextScript, Head } from "next/document"
import { InitializeColorMode } from "reflexjs"
export default class extends Document {
render() {
return (
<Html lang="en">
<Head />
<InitializeColorMode />
<Main />
<NextScript />

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:

"presets": [
"preset-react": {
"runtime": "automatic",
"importSource": "reflexjs"
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:

/** @jsxImportSource "reflexjs" */
export default function IndexPage() {
return <p variant="text">Hello World!</p>

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

Upgrade GuideGatsby

© 2022 Reflexjs

DocumentationBlocks LibraryGuidesGitHub