Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NextJS app router compatibility #79

Open
verdverm opened this issue Jun 8, 2023 · 4 comments
Open

NextJS app router compatibility #79

verdverm opened this issue Jun 8, 2023 · 4 comments
Labels
enhancement New feature or request

Comments

@verdverm
Copy link

verdverm commented Jun 8, 2023

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
Copy link
Owner

LiveDuo commented Jun 14, 2023

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
Copy link
Author

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
Copy link
Owner

LiveDuo commented Jun 25, 2023

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 LiveDuo added the enhancement New feature or request label Jul 1, 2023
@abdulhakam
Copy link

abdulhakam commented Jul 17, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants