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 projectplease 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- npm
- yarn
npm install --save-dev @derealize/babel-plugin-transform-react
yarn add --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:- Derealize Editor
- Derealize Studio
1 Import Project to Derealize Editor App.
2 Command 'yarn dev' to start project.
3 Open the project in Derealize Editor App.
1 Import Project to Derealize Editor App. Carefully configure the git branch you want Derealize Studio to manage.
2 Open & Start the project directly in Derealize Studio App.