Anyone gotten Next.js 13 app directory working with Plasmic?

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?

  1. Create a new .ts file in your project with the following content
"use client"

export * from "@plasmicapp/loader-nextjs";
  1. Replace all imports of @plasmicapp/loader-nextjs @plasmicapp/loader-react @plasmicapp/react-web with 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):

  1. Replace getStaticPaths with generateStaticParams https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site
  2. Move everything in getStaticProps directly 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?

fetch is 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