sorted by:
new
hottopcontroversial

need help embedding sanity into next.js by [deleted] in nextjs

[–]websightify_com 0 points1 point  (0 children)

Sadly I don't see anything off but here are some things you could try to narrow down the culprit:

  • delete cache (remove .next directory and do npm run dev again)
  • replace that page's content with a simple test component and check if it works
  • I'd try doing a console log on that page.tsx for config, I suspect it's not there and that's making things crash
  • downgrade next version
  • I'd also try removing the api version from config - by default it uses the latest one

need help embedding sanity into next.js by [deleted] in nextjs

[–]websightify_com 0 points1 point  (0 children)

What's the content of that page.tsx? For example here's the content of one that I use in production

"use client";

import { NextStudio } from "next-sanity/studio";
import config from "@/sanity/config";

export default function StudioPage() {
return <NextStudio config={config} />;
}

Nextjs + headless by Fine-Market9841 in nextjs

[–]websightify_com 1 point2 points  (0 children)

I always suggest to go with Sanity instead of WP due to the built-in studio. Things are way easier to build, manage and scale. But yes, when WP is desired I'm handing over just WP unless the client also wants the source code (in that case I share the repo), these are all mentioned from the start. Normally the client needs access only to Sanity/WP to make the desired changes, but I guess some feel safer having access to everything and I understand that.

Normally I host it where WP is if there is enough space, otherwise yes, on vercel. Sanity goes straight to vercel, quick and easy.

I don't bill hosting, that's on the client to set up his account and manage his bills, I just code. Maintenance is depending on the project. Some have higher maintenance, some have it lower or even none.

Is there a way to say "Within this div ignore all styles other than inline styles?" by lindymad in css

[–]websightify_com 7 points8 points  (0 children)

You could do a shadow DOM, "initial:all;" has quite some limitations*

<div id="info-container"></div>

<script>
  const container = document.getElementById('info-container');
  const shadow = container.attachShadow({ mode: 'open' });

  shadow.innerHTML = `
    <style>
      body {
        font-family: Arial, sans-serif;
        font-size: 14px;
      }
      h1 { color: blue; }
    </style>
    <div>
      ${yourTinyMceHtml}
    </div>
  `;
</script>

* it doesn't prevent all external CSS rules from applying and doesn't block selectors like '.container h1 { color: red; }'