Designly Blog

#Nextjs

Using ENUMs to Make JSX Select Inputs More Type-safe
4 months ago
Front End Development

Using ENUMs to Make JSX Select Inputs More Type-safe

Enhance your React/Next.js projects with TypeScript for better type safety and code hinting. Learn how to use ENUMs for type-safe HTML select elements.

Roll Your Own Real-time Chat Server with Next.js and WebSockets
8 months ago
Full-Stack Development

Roll Your Own Real-time Chat Server with Next.js and WebSockets

Learn how to build a real-time chat app using Next.js and WebSocket.

How to Create Your Own Image Optimization / Resizing Service for Practically Free
11 months ago
Full-Stack Development

How to Create Your Own Image Optimization / Resizing Service for Practically Free

Learn to create a cost-effective image optimization service using PHP, AWS CloudFront, S3, and CloudFlare, enhancing image delivery and performance.

Serverless Sucks: How to Deploy your Next.js App to a VPS and Setup a CI/CD Pipeline
11 months ago
Systems Administration

Serverless Sucks: How to Deploy your Next.js App to a VPS and Setup a CI/CD Pipeline

Master deploying Next.js apps on a VPS with our comprehensive guide. Learn about server selection, setting up NGINX, SSL with Certbot, and CI/CD pipeline setup.

How to Create an Animated Space / Stars Background Effect in React / Next.js
1 year ago
Front End Development

How to Create an Animated Space / Stars Background Effect in React / Next.js

A quick tutorial on how to create a star field background effect in React / Next.js.

Making Typescript More Flexible: Generics and Discriminated Unions
1 year ago
Full-Stack Development

Making Typescript More Flexible: Generics and Discriminated Unions

Master TypeScript's key features—Generics, Discriminated Unions, and Type Guards—with hands-on examples. Boost your code's type safety and flexibility.

Implementing NProgress in the Next.js 13 App Router
1 year ago
Front End Development

Implementing NProgress in the Next.js 13 App Router

In this article, I'll show you how to implement the popular NProgress NPM package in the Next.js 13 App router.

Create an Emoji Selector for Next.js Forms using Tailwind + DaisyUI
1 year ago
Front End Development

Create an Emoji Selector for Next.js Forms using Tailwind + DaisyUI

In this blog post, we're diving deep into the cosmos of code to guide you on creating an emoji selector for your Next.js forms that's both functional and fabulous.

Implementing a Loading Overlay with next/router Events in Next.js
1 year ago
Front End Development

Implementing a Loading Overlay with next/router Events in Next.js

Build a route change loading overlay using `next/router` events.

Building an AI Search App with Next.js and OpenAI: A Step-by-step Guide
1 year ago
Full-Stack Development

Building an AI Search App with Next.js and OpenAI: A Step-by-step Guide

Today, we're taking a deep dive into the realm of AI-driven searches, using a powerful tech stack comprising Next.js, Sequelize, PostgreSQL, pgvector, and the OpenAI API.

Creating an "Install to Home Screen" Prompt in a Next.js Progressive Web App
1 year ago
Front End Development

Creating an "Install to Home Screen" Prompt in a Next.js Progressive Web App

Step-by-step guide to creating an 'Add to Home Screen' prompt for Next.js PWAs, targeting major mobile browsers to enhance user experience.

How to Create an Attractive File Upload Widget With React/Next.js and Tailwind CSS
1 year ago
Front End Development

How to Create an Attractive File Upload Widget With React/Next.js and Tailwind CSS

By leveraging the strengths of React, Tailwind CSS, and Daisy UI, we can create a user-friendly and aesthetically pleasing file uploader.

React and Tailwind CSS: Making a Typewriter Animation from Scratch
1 year ago
Front End Development

React and Tailwind CSS: Making a Typewriter Animation from Scratch

Learn to create a typewriter animation using React and Tailwind CSS. Step-by-step guide to add a retro touch to your web design.

Animating the Web: Route Transitions in Next.js with Framer Motion
1 year ago
Front End Development

Animating the Web: Route Transitions in Next.js with Framer Motion

This article aims to be your comprehensive guide on how to enhance your Next.js applications with smooth, compelling route transitions using Framer Motion.

Enhancing Form Usability with Framer Motion: A Guide to Animated, Chunked Form Transitions
1 year ago
Front End Development

Enhancing Form Usability with Framer Motion: A Guide to Animated, Chunked Form Transitions

Enhance form UX with Framer Motion: Break forms into chunks, animate transitions, and improve user experience for seamless interaction.

Easy Dropdown Menus With Next.js and Tailwind CSS
1 year ago
Front End Development

Easy Dropdown Menus With Next.js and Tailwind CSS

In this article, I'm going to show you how to create a very simple, yet elegant, dropdown menu using nothing but Next.js and Tailwind CSS.

Creating a Basic Authentication Provider in Next.js
1 year ago
Full-Stack Development

Creating a Basic Authentication Provider in Next.js

In this tutorial, we'll walk you through the process of creating a basic authentication provider in Next.js.

Building a Universal Form Controller Using Next.js & Yup
1 year ago
Full-Stack Development

Building a Universal Form Controller Using Next.js & Yup

Learn how you can create your own reusable universal form controller to use across your Next.js app.

Implementing Semantic Search with Supabase, Next.js, and OpenAI: A Tutorial
1 year ago
Full-Stack Development

Implementing Semantic Search with Supabase, Next.js, and OpenAI: A Tutorial

Implement semantic search using Supabase/PostgreSQL, Next.js, and OpenAI. Improve search accuracy and relevance. Tutorial with code examples.

Create A Custom Audio Player Component Using React/Next.js, Tailwind & Howler
1 year ago
Front End Development

Create A Custom Audio Player Component Using React/Next.js, Tailwind & Howler

In this tutorial, we will explore how to create a custom React component that combines the power of Tailwind CSS for styling and Howler for audio playback.

Create a Google Login Button With No Dependencies in React / Next.js
1 year ago
Full-Stack Development

Create a Google Login Button With No Dependencies in React / Next.js

In this article, we'll be exploring how to create a Google login button in React without relying on any external dependencies.

How to Create a Verification Code Input Component in React / Next.js
1 year ago
Front End Development

How to Create a Verification Code Input Component in React / Next.js

In this article, I'll show you how to create a robust OTP code input component for React.js, using no other dependencies.

How to Disable Body Scroll When a Modal Dialog is Open in React / Next.js
1 year ago
Front End Development

How to Disable Body Scroll When a Modal Dialog is Open in React / Next.js

In this tutorial, I'll show you how to create a modal dialog overlay and disable the body scroll bars when it is open using Next.js 13 / React.

Create a Responsive Animated Sidebar Using React / Next.js and Tailwind CSS
1 year ago
Front End Development

Create a Responsive Animated Sidebar Using React / Next.js and Tailwind CSS

In this tutorial, I'll show you how to leverage the power of Tailwind CSS and Next.js to create a simple yet elegant mobile-responsive sidebar using no other dependencies.

Host Your Next.js Site on CloudFlare Pages With Next/Image Support For Free
1 year ago
Full-Stack Development

Host Your Next.js Site on CloudFlare Pages With Next/Image Support For Free

This tutorial will focus on deploying a Next.js website to CloudFlare Pages + Workers, complete with Next/Image support via a custom image loader.

Turnstile:  CloudFlare's New reCaptcha Replacement in NextJS / React
1 year ago
Full-Stack Development

Turnstile: CloudFlare's New reCaptcha Replacement in NextJS / React

In this article, I'm going to show you how to implement CloudFlare's Turnstile CAPTCHA service in a React or NextJS app using Le0Developer's react-turnstile package.

NextJS 13 / React Single Sign-On (SSO) Authentication Via Azure Active Directory (AD)
1 year ago
Full-Stack Development

NextJS 13 / React Single Sign-On (SSO) Authentication Via Azure Active Directory (AD)

In this tutorial, I'll show you how to authenticate a user against an Azure AD domain in a NextJS 13 app environment.

Authentication Using NextJS 13 / React & Amazon AWS Cognito
1 year ago
Full-Stack Development

Authentication Using NextJS 13 / React & Amazon AWS Cognito

In this guide, I'm going to show you how to create a NextJS app complete with a next-auth-based authentication flow, and using AWS Cognito as the identity provider.

Internationalization Using React / NextJS 13 and ChatGPT
1 year ago
Full-Stack Development

Internationalization Using React / NextJS 13 and ChatGPT

In this tutorial, I'm going to show you how to utilize OpenAI's text-davinci API, more commonly known as ChatGPT, in conjunction with NextJS's fabulous automatic locale detection and Static Site Generation (SSG), to automate translation of your website content at built-time.

How to Create an Infinite Scroll Component in NextJS / React (Updated)
1 year ago
Full-Stack Development

How to Create an Infinite Scroll Component in NextJS / React (Updated)

In this tutorial, I'll show you how to create your own infinite scroll component in NextJS / React without depending on an external library.

Creating a Modern Hero Image Using NextJS 13 Images and Tailwind CSS
1 year ago
Full-Stack Development

Creating a Modern Hero Image Using NextJS 13 Images and Tailwind CSS

This tutorial focuses on creating a more modern website hero section using NextJS 13 Images and Tailwind CSS.

Create a Telephone IVR Using ChatGPT, NextJS and Twilio
1 year ago
Telephony / VoIP

Create a Telephone IVR Using ChatGPT, NextJS and Twilio

By using Twilio to build your IVR, ChatGPT as the AI backend, and NextJS for the middleware, you can get an AI-powered IVR set up in less than 20 minutes. And I'm going to show you how.

Next.JS - Kick-Ass Form Handling Using React-Hook-Form, Yup and Bootstrap
2 years ago
Full-Stack Development

Next.JS - Kick-Ass Form Handling Using React-Hook-Form, Yup and Bootstrap

Creating forms with validation is often a tedious and daunting task. I'll show you how to streamline and speed up this process using Next.JS, React-Hook-Form, Yup and Bootstrap!

Simple Next.JS Form to Email Using React-Hook-Form and Gmail
2 years ago
Full-Stack Development

Simple Next.JS Form to Email Using React-Hook-Form and Gmail

Sending form data to an email address is quick and easy in Next.JS using nothing more than your own free Gmail account, Nodemailer, and React-Hook-Form.

Next.JS - How to Implement Incremental Static Regeneration (ISR)
2 years ago
Full-Stack Development

Next.JS - How to Implement Incremental Static Regeneration (ISR)

Incremental Static Regeneration is a new feature of Next.JS. It allows specific pages to regenerate without having to completely rebuild the app. I'll show you how to get it up and running in a few minutes and lines of code.

How to Create a Blog Using Next.js and Contentful CMS
2 years ago
Website Design

How to Create a Blog Using Next.js and Contentful CMS

Learn how to create your own completely-free cloud-hosted blog using Contentful, Vercel and Next.JS.

React / Contentful - Create Entries with Linked Objects
2 years ago
Cloud Computing

React / Contentful - Create Entries with Linked Objects

Contentful is my new favorite headless CMS. I use it primarily for generating React / Next.JS static pages. In this tutorial, I'll show you how to programmatically create a Contentful entry with linked objects (references).

How to Create a Custom Next.js Link Component With Bootstrap Icon
2 years ago
Website Design

How to Create a Custom Next.js Link Component With Bootstrap Icon

I'll show you how to create a custom Next.JS next-link component with a Bootstrap icon.