anybody gotten Next 13 app/ wired up with Plasmic? I’m anxious to use nested layouts and can’t seem to get a boiler plate running https://codesandbox.io/s/next-13-plasmic-0eryst?file=/app/[[...catchall]]/page.tsx
Hey Beamer, we’re still experimenting with Next.js 13 and will be documenting it soon. I followed the instructions at https://beta.nextjs.org/docs/rendering/server-and-client-components#third-party-packages and it worked for me. I’ll paste what I did below. Would you try it and let me know if it works for you?
- Create a new .ts file in your project with the following content
"use client"
export * from "@plasmicapp/loader-nextjs";
- Replace all imports of
@plasmicapp/loader-nextjs @plasmicapp/loader-react @plasmicapp/react-webwith your new file
What’s the set up on the catchall page? How do I prepass fetch etc? Getting hung up on that
I haven’t tested the catchall and prepass yet, but will probably get to it next week. I imagine it would look something like this (have not tried it):
- Replace
getStaticPathswithgenerateStaticParamshttps://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site - Move everything in
getStaticPropsdirectly into the component
Let me know if you run into any errors with this
so here you can see the error i’m getting https://codesandbox.io/s/next-13-plasmic-0eryst?file=/app/[[...catchall]]/page.tsx
is this something?
fetchis currently not supported in Client Components and may trigger multiple re-renders.
https://beta.nextjs.org/docs/data-fetching/fetching#use-in-client-components
it seems the only way to do this would be to use SWR on the frontend and client render plasmic pages async if the [[…catchall]] has to be run in client mode. initPlasmicLoader has to happen on the client (it imports a component that uses useRef hook). Does this destroy SEO?
Hi, I tested Plasmic with Next.js 13 server components, and it looks like you’re right–Plasmic currently will not work on server components. There are some issues we’ll need to resolve w.r.t. our package structure and how the module-level use client directive works. We’re working on a solution for this and will update the community as soon as possible (will probably be at least a few weeks).
Ok thank you. Excited for this. Seems like it would reduce a lot of the plasmic overhead
For now, if you need to use Next.js 13, you can use the pages/ directory for pages that depend on Plasmic.
Any updates from the front lines on this?
Hey, sorry for the delay. We have a prototype working, so expect an update in ~2 weeks.
Hi @efficient_pelican, we’re still finalizing some details and documentation, but you can start testing it out now. Here’s an example app that you can check out: https://github.com/plasmicapp/plasmic/tree/master/examples/nextjs13-example
Things to look out for:
• "next": "^13.1.0"
• "@plasmicapp/loader-nextjs": "^1.0.217"
• Import initPlasmicLoader from @plasmicapp/loader-nextjs/react-server-conditional (example plasmic-init.ts)
• You need to move some code to a “use client” file (example plasmic-init-client.ts)
• Finally, here’s an example catchall page.tsx
Let me know if you try it out and how it goes!
COOL! Can’t wait
Hey, that code is specific to this example project.
You can try using create-plasmic-app instead, it will generate a next 13 app for you.
Ok thanks I’ll explore there
that worked awesomely
is it possible to move the provider to the global layout still so can have global components like nav?
It doesn’t seem like I can. I’ve been trying everything I can but maybe next docs are lacking