Skip to main content

Configuration your Next.js project

tip

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

caution

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
./.babelrc
{  "presets": ["next/babel"],  "plugins": ["@derealize/transform-react"]}

2. Config tailwindcss#

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

3. Config derealize#

./package.json
  ...  "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  },  ...
note

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#

./pages/_app.js
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();    };
    router.events.on("routeChangeComplete", handleRouteChange);
    return () => {      router.events.off("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.