Nextjs59

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

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.

It comes to the point in time when your Vercel project is mature enough, and you would like to get rid of the default xxx. vercel.app domain and use your domain

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

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.

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.

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.

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.

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.

Let’s create a completely new website powered with next.js 14, Contentful, and Typescript

In the third story, we will use our Next.js app to get the Azure AD B2C Access Token to create Resources on Azure via the App Service created initially.

Now we will add the UserAgent, Pathname, Mobile, Platform, Region, and City. All data will be saved to a Neon.tech Postgres DB via Prisma ORM, as in the story before.

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

React introduced the useMemo and useCallback hooks in React 16.8, which was released on February 6, 2019. So, as of August 2024, these hooks are five years and 6 months old.

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.

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.

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

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

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

Ensuring system availability is crucial for any product. Implementing rate limiting effectively addresses these issues and can be integrated seamlessly.

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

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.

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

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.

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.

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'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

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.

We will focus on possible Identity providers for our Azure B2C Tenant because we would like to remove every obstacle for our users during the login process. Let's start with the main ones.

After integrating it into our Next.js 14 project, we will style the signup and sign-in page provided by Azure AD B2C to look nicer.

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

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 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.

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.

Enrich Contentful payload from webhook with Next.js 14 routes to push the needed data to Algolia. Extract Json from Rich-Text field to index the right content.

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

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.

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 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

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.

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.

In my last projects, I needed to establish a DB connection to more than one Postgres DB. I had the challenge of managing these multiple connections within the Prisma Context.

There are several ways to manage content (Creating, updating, deleting, and delivering content). Let’s do a deep dive into this CMS's REST capabilities.

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.

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.

In the rapidly evolving landscape of web development, the synergy between Next.js and TypeScript has become a cornerstone for building efficient, scalable, and robust applications.

In the digital world, a good UX and SEO strategy is crucial for the success of a website. Web developers choose between infinite scrolling and pagination.

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 show you how fast you can add a clap function to your blog posts. We use Upstash Redis as our serverless DB, Next.js 14 for the App, and Azure AD B2C with Next-Auth

I will show you how easy it is to access your data in your Azure AD B2C Tenant via REST so that you can integrate it into your Next.js 14 project. We will extend our Prisma schema as well.

I want to track login attempts to support users if they face issues and to understand better what is going on during login. Azure offers a smart way to implement some logic.

We will focus on integrating this tenant into a full-fledged Next.js 14 project. As a template, we will take the example that we created in the previous stories

Contentful and Next.js are two popular tools in the world of web development. Contentful is a CMS that allows users to create, manage, and publish content

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.

Installing and using NVM (Node Version Manager)