LiveDuo / destack

Page builder for Next.js 🅧. Zero-config deployment 🚀. React now supported!
MIT License
1.56k stars 314 forks source link

NextJS app router compatibility #79

Open verdverm opened 1 year ago

verdverm commented 1 year ago

It seems destack does not work, or the example needs updating, for how to use with the new app router, now the recommended default when starting a new next app.

"getStaticProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching

   ,-[/home/tony/hof/mods/tmp/myapp/app/example/page.tsx:1:1]
 1 | 'use client';
 2 | 
 3 | import 'destack/build/browser/index.css'
 4 | export { getStaticProps } from 'destack/build/server'
   :          ^^^^^^^^^^^^^^
 5 | export { ContentProvider as default } from 'destack'
   `----

File path:
  ./app/example/page.tsx
LiveDuo commented 1 year ago

I just added an example to the Next.js starter project destack-starter/tree/next-app-router.

Note that:

  1. It still uses the "pages" API routes for the local server pages/api/builder. I'm pretty confident there's a way around that but I wanted to get an example working for everyone willing to try the new app router out.
  2. Most changes are in app/page.js. It's similar to the "pages" setup except that there's a separate component for the editor. That's because the new router needs a "use client" directive for client components. I haven't found a way around that and if anyone knows a way please let me know.
verdverm commented 1 year ago

I think it's less about finding "a way around" and more about migrating to the new standard. Things work differently with the app router to support features like RSC

LiveDuo commented 1 year ago

Feel free to create a PR with the migration:

There are two issues, listed above:

It still uses the "pages" API routes for the local server pages/api/builder. I'm pretty confident there's a way around that but I wanted to get an example working for everyone willing to try the new app router out.

Most changes are in app/page.js. It's similar to the "pages" setup except that there's a separate component for the editor. That's because the new router needs a "use client" directive for client components. I haven't found a way around that and if anyone knows a way please let me know.

If you pick it up and have any questions hit me up.

abdulhakam commented 1 year ago

I think it's less about finding "a way around" and more about migrating to the new standard. Things work differently with the app router to support features like RSC

there is a guide about migrating from pages router to app router on nextjs official documentation, which may need modifying the file that contains getStaticProps, modifications could be minor. I haven't tried it since I am beginning to learn nextjs.

Edit: I tried different ways to make it work but I guess my current knowledge is still not enough to make it work.