Loading...

GraphQL28

Next.js 14 — Complete Example — Adding Internationalization / Multilanguage to our Blog based on Contentful/GraphQL — Part 5

Next.js 14 — Complete Example — Adding Internationalization / Multilanguage to our Blog based on Contentful/GraphQL — Part 5

In Part 5, we will add multilanguage support and a language switcher to our example Blog powered by Contentful and the GraphQL API. (Client/Server Components)

Next.js 14 - Working with Contentful Tags and TailwindCss

Next.js 14 - Working with Contentful Tags and TailwindCss

Contentful offers a great tagging system. I will show you how we can use it to cluster content by tags and expose new " tag pages," with the related content

Next.js 14 - How to Use Contentful Environments and Aliases

Next.js 14 - How to Use Contentful Environments and Aliases

In this story, I will show you how to use Contentful Environments and Aliases in your Nextjs 14 project. Environments are a great way to change your project's data structure.

Next.js 14 -Data model extension and Contentful data sync with API route

Next.js 14 -Data model extension and Contentful data sync with API route

We will walk through the process of a complete data re-sync between Contentful and Algolia with two Custom API Routes in Nextjs 14, and we will extend the Algolia Data Model.

Next.js 14 - Flyout menus with TailwindCSS & Contentful - Part 2

Next.js 14 - Flyout menus with TailwindCSS & Contentful - Part 2

In the previous story, we created the components for the flyout menu and did the basic integration. Now, we will connect the menu with our headless CMS Contentful.

Next.js 14 / SEO - Combine Pagination with Infinite Scroll

Next.js 14 / SEO - Combine Pagination with Infinite Scroll

We know, Google Crawler is not a big fan of infinite scrolling because it can't use Javascript. Therefore, we need to add a crawler-friendly solution to find and index all pages properly.

Next.js 14 - Creating an HTML Sitemap in 5 minutes with Contentful

Next.js 14 - Creating an HTML Sitemap in 5 minutes with Contentful

An HTML sitemap lists and links to all pages on a website, providing an organized overview of its structure. Search engines benefit from HTML sitemaps as they ensure all pages are discovered

Next.js 14 - Endless Scroll with Contentful and Server Actions

Next.js 14 - Endless Scroll with Contentful and Server Actions

As your blog grows, you may need a function like "Load more" or "Infinite scroll." I will focus on that and show how easy it is with Next.js 14, Server Actions, and Contentful as CMS.

Contentful and Next.js 14 - Easy Creation & Integration of New Content Types for Landing Pages

Contentful and Next.js 14 - Easy Creation & Integration of New Content Types for Landing Pages

Every Blog needs a nice-looking landing page. This step-by-step guide will add two new content types in Contentful and show the newly added data on our Next.js 14 blog project.

Improving Website Visibility: The Importance of Next.js SEO

Improving Website Visibility: The Importance of Next.js SEO

Server-side rendering (SSR) and static site generation (SSG) are at the core of Next.js’s SEO capabilities to support search engine crawlers

Nextjs Content Management, Quo Vadis?

Nextjs Content Management, Quo Vadis?

You plan to start a new business where you need to present your new products to a broader audience on a marketing website. Here you will find a complete guide.

Next.js 14 - Complete Example - Header / Footer / Tailwindcss / Contentful - Part 3

Next.js 14 - Complete Example - Header / Footer / Tailwindcss / Contentful - Part 3

Now we have reached part 3 and we will add a header and a footer component, as well as the so-called draft/preview functionality offered by Contentful. Not to forget the nowadays mandatory dark mode toggle.

Next.js 14 - Complete Example - Typescript / Tailwindcss / Contentful - Part 2

Next.js 14 - Complete Example - Typescript / Tailwindcss / Contentful - Part 2

Let's dig deeper and build a nice UI on our Nextjs foundation with the help of Tailwindcss/Contentful

Next.js 14 -Building Custom Client-Side Tracking End-to-End

Next.js 14 -Building Custom Client-Side Tracking End-to-End

I will show you how you can build a custom hook for page tracking and integrate it into your existing Next.js 14 project with ease. The data will be saved into a Neon.tech Postgres DB

Next.js 14 -Advanced Search Integration with Algolia UI Libraries (Widgets)

Next.js 14 -Advanced Search Integration with Algolia UI Libraries (Widgets)

In this follow-up story, I will show you how to easily integrate the Algolia Instant search into your existing Next.js 14 project. We will also use custom styling with TailwindCss.

Next.js 14 -Advanced Analytics with new Styles, and new Widgets - Part 2

Next.js 14 -Advanced Analytics with new Styles, and new Widgets - Part 2

In this post, we will proceed with our analytics dashboard. We will add new styling with TailwindCss and new Widgets to our Dashboard, which we created in our existing Nextjs 14 project.

Next.js 14 -Advanced Analytics with Tinybird and integrated Dashboard

Next.js 14 -Advanced Analytics with Tinybird and integrated Dashboard

We introduce the platform Tinybird and integrate the provided Javascript Snippet for the data collection. Then, we integrate the Analytic Dashboard into our existing Nextjs 14 project.

Next.js 14 -Building Flyout Menu with TailwindCSS in minutes

Next.js 14 -Building Flyout Menu with TailwindCSS in minutes

Building a flyout menu with Tailwind CSS is advantageous due to its utility-first approach. This approach offers flexibility and speeds up development by using pre-defined classes

Boost Blog Traffic: Reasons to Add Social Share Buttons Now

Boost Blog Traffic: Reasons to Add Social Share Buttons Now

Integrating social share buttons on your blog post can significantly increase reach and visibility by making it easy for readers to share, boosting traffic and providing social proof

Next.js 14 - Expand your SEO tools with Slugify/Word & Letter Counter

Next.js 14 - Expand your SEO tools with Slugify/Word & Letter Counter

A slugify function is valuable for creating clean, readable, and SEO-friendly URLs that enhance user experience. To round up the service offering, we add a Word/Character count as well

Next.js 14 - Create a Broken Link Checker based on the sitemap.xml

Next.js 14 - Create a Broken Link Checker based on the sitemap.xml

A broken link checker is crucial for maintaining website health and user experience. It helps identify and fix dead links, which can frustrate users and negatively impact SEO rankings.

Next.js 14 / SEO - Create a Sitemap Counter in 5 minutes

Next.js 14 / SEO - Create a Sitemap Counter in 5 minutes

An up-to-date sitemap.xml builds the foundation for the Google Crawler. We will create a count function to check the sitemap.xml. This will help us to check if all pages are present.

Next.js 14 - View Counter for Blog with Serverless Redis (Upstash)

Next.js 14 - View Counter for Blog with Serverless Redis (Upstash)

I'm using Next.js 14 with the new app router, but instead of storing the page views in a relational database like PostgreSQL, I'll be using Upstash Redis so add this nice feature

Control of Vercel deployments and webhooks for Nextjs 14

Control of Vercel deployments and webhooks for Nextjs 14

Deploying a Nextjs project to Vercel is easy, and all you need is a GitHub account for your project code. But you need more control over the deployment

Next.js 14-Caching/Revalidation-Real-world example with CMS

Next.js 14-Caching/Revalidation-Real-world example with CMS

I will guide you through the possibilities of caching and revalidation in Nextjs 14. I will use Contentful as a headless CMS for content management.

Next.js 14 - Easy TOC creation and Code block highlight

Next.js 14 - Easy TOC creation and Code block highlight

Structuring your content is great for your users and Search Engines, but sometimes, it leads to much work for the Authors/Editors, so let's automate it.

Next.js 14 - Consent Management & Analytics for free

Next.js 14 - Consent Management & Analytics for free

Consent Management can be expensive and complex, but with the right tools and guides, it's a no-brainer. This story will guide you through it powered by Piwik.

Algolia and Next.js 14 — Easy Integration as On-Site-Search at no cost

Algolia and Next.js 14 — Easy Integration as On-Site-Search at no cost

Every Blog needs a lightning-fast search and content filtering. Let’s use one of the best services in the market and combine it with a nice-looking Tag Cloud delivered in Milliseconds.