In this Next.js tutorial, you'll learn how to create a data-driven component with WordPress and Next.js. Let's head to the GraphiQL interface to build out our query before we head over to Next.js to implement this feature. I'm going to assume that you are using some kind of WordPress/Next.js starter or have Apollo up and running in your Next app. We'll need to use the query we constructed above and use it in the right place.
When you are building a content-driven website for a client, there is often some tension between creating a consistent user experience and adding some flair.
If, like I am, you are mostly working in a headless way, you may also want your CMS to capture and serve raw data at particular points. You can handle and process this in your front-end framework of choice.
When we build front ends, we tend to talk about component-driven architecture. This post will look at building one such component from the backend through to the front.
I'm going to build one of the FrontPanel components from my website. It looks like this:
Labelled version of the FrontPanel component
Looking at the component, I want to break down the data that I need to be able to generate it most efficiently.
Now that I know what I'm going to build, I need to be able to capture and query the data. To do this I'm going to use the Advanced Custom Fields plugin for WordPress. This allows us to add fields to specific locations to capture the data we need.
If you are using the free plugin, you gain a lot of excellent functionality. The ACF Pro upgrade adds some really useful field types that I use a lot in client work and find hard to live without. For me, the highlights are Repeater Fields, Flexible Content fields and the Options pages.
But this isn't an advertisement for ACF! For this post, I'll use the free plugin. Note that on the home page of this website I use this same strategy with a Flexible Content field which lets me mix and match this component with other components.
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
Learn how to source content in Next.js with a headless WordPress instance.
Next vs React is a popular topic and for good reason. Next can be seen as React with bells and whistles. Next.js features let us create apps and sites faster vs React. Next.js is a production ready React framework that comes with niceties out of the box. Next has features like routing, code splitting, image optimization, and static site generation that makes our lives as developers easier.