How to use Next.js with Local's WP?

Support
1

What issue or error are you experiencing?

  • error Error [TypeError]: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:14294:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async fetchAPI (webpack-internal:///./lib/api.ts:18:17)
    at async getAllPostsForHome (webpack-internal:///./lib/api.ts:64:18)
    at async getStaticProps (webpack-internal:///./pages/index.tsx:85:22) {
    digest: undefined
    }

What steps can be taken to replicate the issue? Feel free to include screenshots, videos, etc

  1. Spin up a local WP with WPGraphQL plugin activated.
  2. Download Next.js’ cms-wordpress app.
  3. Add the http://name-of-wp.local/graphql to the .env.local file in Next.js app.
  4. Try to go to localhost:3000

System Details

  • Local Version:
    Web Server: nginx
    PHP Version: 8.19
    Database: MySQL 8.0.16
    WordPress Version: 6.3

  • Operating System (OS) and OS version:
    Windows for WP
    WSL2 Ubuntu for Next.js App

Additionally, if I use a live WP server and use its graphQL endpoint, it does not give me any errors and works perfectly. This might have something to do with local issues with Flywheel rather than the Next.js or JS issues.

Any advice is welcome.

2

Hi @sgfanega!

Have you been through our help doc below? Using the Atlas Headless Add on and following the steps in there should help get you going, but let us know if you still have questions!

3

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.