examples: Updating WordPress example to Next 14

[Bjornnyborg]

Updating the WordPress example, to a more modern example.

Key features:

• robots.ts: This automatically gets the robots.txt of the API route and serves it on the /robots.txt route.
• sitemap.ts: This automatically gets all paths from the API and generates a sitemap to serve on the /sitemap.xml route.
• middleware.ts: This contains a middleware function that checks the users path for stored redirects, and redirects the user if a match is found.
• [[...slug]]: This is the catch-all route that is used to render all pages. It is important that this route is not removed, as it is used to render all pages. It fetches the ContentType and renders the corresponding
• not-found.tsx: This page is used for dynamic 404 handling - adjust the database id to match your decired WordPress page, and make sure the WordPress slug is "not-found", your 404 page will then be editable from your CMS.
• codegen.ts: Automatic type generation for your WordPress installation
• Draft Mode: Seamless Preview / Draft Preview support, using authentication through WPGraphQL JWT Authentication and Next.js Draft Mode
• On Demand Cache Revalidation: Including a bare minimum WordPress theme that implements cache revalidation, WordPress link rewrites and other utils for integrating with Next.js

✅ The "examples guidelines" are followed from our contributing doc https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md

✅ Make sure the linting passes by running pnpm build && pnpm lint. See https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

[leerob]

Thanks for this suggestion!

• Could we remove the unnecessary code comments, please? Ideally we can name the functions/variables in a way that are self-documenting.
• Could you try to remove unneeded dependencies? i.e. doing GraphQL over fetch versus bringing in Apollo.
• Can you share a working deployment so we can try this out?
• Could you address the merge conflicts, plase?

[samcx]

@Bjornnyborg Thank you for submitting a PR!

If you can you address the comments, above, we will be able to progress with this.

[ijjk]

Allow CI Workflow Run

• [x] approve CI run for commit: 5d65b98772a519c07a02342d22e9b8eb31295538

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

[ijjk]

Allow CI Workflow Run

• [x] approve CI run for commit: 5d65b98772a519c07a02342d22e9b8eb31295538

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

[socket-security[bot]]

New dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@graphql-codegen/[email protected]	environment, filesystem, network, shell, unsafe	+40	3.46 MB	dotansimha
npm/@graphql-codegen/[email protected]	None	+9	854 kB	dotansimha
npm/@graphql-codegen/[email protected]	None	0	11.3 kB	dotansimha

View full report↗︎

[Bjornnyborg]

Hey @leerob and @samcx ! Thanks for getting back on this PR. 😊

I have updated the PR now:

• Removed unnecessary code comments and auto generated files
• I am actually already doing the requests with fetch, the apollo.config was only for enabling auto-completion for the queries, using the Apollo VS Code plugin - this is actually optional, so i added an example to the ReadMe, and removed the config file.
• Working deployement: https://next-js-phi-fawn.vercel.app/ - the WordPress is located here: https://headless.29x.dk/wp-admin - if you want i can invite you guys to the WordPress backend too.
• Merge conflicts resolved

Anything else i should improve? 😊

[samcx]

@Bjornnyborg Not sure if it was intentional, but it seems the navigation is waiting to load data—could there be a better way to implement this?

[Bjornnyborg]

@samcx Good catch! Added the generateStaticParams to the Catch-All route, returning and empty array to have the ISR functionality enabled. 😊