added sync style method in next.config.js

next.config.js

@@ -1,14 +1,29 @@
-// next config
-module.exports = {
-  trailingSlash: true,
-  reactStrictMode: true,
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-  async redirects() {
-    // Dynamic module import because nextjs-sync is ESM
-    const zestyNext = await import("@zesty-io/nextjs-sync");
-    const data = await zestyNext.fetchRedirects();
-    return data;
-  },
+async function getStyles() {
+  // Dynamic module import because nextjs-sync is ESM
+  const { styles } = await import("@zesty-io/webengine-json");
+  const data = await styles(
+    process.env.ZESTY_PREVIEW_DOMAIN,
+    process.env.ZESTY_PREVIEW_PASSWORD
+  );
+  return data;
+}
+
+module.exports = async () => {
+  return {
+    // passing sync styles
+    publicRuntimeConfig: {
+      styles: await getStyles(),
+    },
+    trailingSlash: true,
+    reactStrictMode: true,
+    eslint: {
+      ignoreDuringBuilds: true,
+    },
+    async redirects() {
+      // Dynamic module import because nextjs-sync is ESM
+      const zestyNext = await import("@zesty-io/nextjs-sync");
+      const data = await zestyNext.fetchRedirects();
+      return data;
+    },
+  };
 };

pages/_app.tsx

@@ -5,6 +5,9 @@ import { createTheme, ThemeProvider, CssBaseline } from '@mui/material';
 import { Roboto } from 'next/font/google';
 import type { AppProps } from 'next/app';
 import { grey } from '@mui/material/colors';
+var getConfig = require("next/config");
+const { publicRuntimeConfig } = getConfig();
+let styles = publicRuntimeConfig.styles;
 
 const roboto = Roboto({
   weight: ['300', '400', '500', '700'],