destack icon indicating copy to clipboard operation
destack copied to clipboard

NextJS app router compatibility

Open verdverm opened this issue 2 years ago • 4 comments

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

verdverm avatar Jun 08 '23 08:06 verdverm

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.

LiveDuo avatar Jun 14 '23 23:06 LiveDuo

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

verdverm avatar Jun 17 '23 22:06 verdverm

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.

LiveDuo avatar Jun 25 '23 12:06 LiveDuo

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.

abdulhakam avatar Jul 17 '23 08:07 abdulhakam