Skip to main content

Configuration your Next.js project


If the configuration process is not successful, you can refer to our template project.

0. Import TailwindCSS to your project#

please check the tailwindcss documentation


Derealize strongly recommend to use jit mode of tailwindcss to run your project, so you need import thetailwindcss v2.1+ version

1. Import derealize babel plugin#

If you want to know why?

npm install --save-dev @derealize/babel-plugin-transform-react
{  "presets": ["next/babel"],  "plugins": ["@derealize/transform-react"]}

2. Config tailwindcss#

module.exports = {  mode: "jit",  purge: [    "./pages/**/*.{js,ts,jsx,tsx}",    "./components/**/*.{js,ts,jsx,tsx}",    "./derealize-jit.html",  ],  ...}

3. Config derealize#

  ...  "scripts": {    "dev": "next dev -p 3001",    "build": "next build",    "start": "next start",    "format": "prettier --write **/*.{js,jsx,ts,tsx} --config ./.prettierrc"  // Optional  },  "derealize": {    "runScript": "dev",                    // Only required for Derealize Studio with node runtime    "port": 3001,                          // Only required for Derealize Studio with node runtime    "formatScript": "format",              // Optional    "baseUrl": "http://localhost:3001",    "pages": [      "/",      "/Welcome",      ...    ],    "assetsPath": "./static/assets",       // save your images    "assetsUrl": "/assets",                // public path of the images    "applyCssFile": "./styles/globals.css" // entry css file, so derealize can be parsed @apply  },  ...

The npm script 'format' is not required, but we think you will definitely need it. to prevent improperly formatting your react code every time 'drealize' updates it.

4. Handle the routeChangeComplete event#

import { useEffect } from "react";import { useRouter } from "next/router";import "../styles/globals.css";
function MyApp({ Component, pageProps }) {  const router = useRouter();
  useEffect(() => {    if (typeof window === "undefined" || !window.derealize) return;
    const handleRouteChange = (url, { shallow }) => {      window.derealize.listenElement();    };"routeChangeComplete", handleRouteChange);
    return () => {"routeChangeComplete", handleRouteChange);    };  }, []);
  return <Component {...pageProps} />;}
export default MyApp;

That's enough!

Now you can import/start project in Derealize Editor or Studio:#

1 Import Project to Derealize Editor App.

2 Command 'yarn dev' to start project.

3 Open the project in Derealize Editor App.