Tailwindcss32

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

Some months ago, when I was working on a project, the Idea came up to animate the button so that it shows “bouncing dots” as long as the process in the background was not finished.

Let's build a nice-looking upload form with Next.js 14. We will integrate a dropzone and the capability to upload multiple files simultaneously with a fancy upload progress bar.

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.

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

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

In Part 4 we are going to add a custom 404 page, a loading UI (SVG Spinner) and we add some extra colors to our tailwind.config.ts

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.

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.

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.

You can use different approaches to integrate code blocks on your blog or website (TailwindCSS, etc.). I came across a modern approach to syntax highlighting and discovered Shiki

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.

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.

Now, we will examine the last two widgets (“HighLight” and “Snippet”), which we did not use in our previous post, where the focus was on SearchBox, Hits, and RefinementList.

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.

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.

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.

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

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.

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)

In the fast-evolving world, connecting and synchronizing data across various platforms is key. This article will guide you through connecting a Neon.Tech Postgres database to Azure AI Search

In this last part of my series on building a SaaS solution using Next.js 14 and Azure, we will focus on the payment integration with Stripe so that you can ask for a subscription, etc.

In this final part of our series on building a SaaS solution using Next.js 14 and Azure, we will focus on the critical aspect of managing Azure Storage Accounts.

I will reuse the component I created in the previous story combined with the headless CMS Contentful. So I can create my Content within Contentful and use Next.js 14 for the visualization

Due to its serverless architecture, Upstash Kafka is an ideal solution for website analytics. It offers high throughput and low latency, crucial for real-time data processing.

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

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

I will show you how you can delete and/or update your data within the Azure AD B2C Directory and your PostgreSQL DB at Neon.tech with ease using Prisma ORM/REST

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.

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.

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.

Page speed is a significant ranking factor for search engines. Next.js offers various features to improve your site’s loading times like optimized image loading.