All Next.js posts
Add Dynamic Sitemap to Next.js Website Using Pages or App Directory
Updated on · 6 min read|In this post we will explore how to add a dynamic sitemap to a Next.js website using both the 'pages' and 'app' directories. A sitemap is a file that lists all the pages of a website and helps search engines understand the structure of the site. By the end of this post, you will have a fully functional dynamic sitemap for your Next.js website.
Continuously Deploying Next.js Website to DigitalOcean Using GitHub Actions
Updated on · 7 min read|In this post, we'll dive into the automation of a Next.js website deployment to DigitalOcean using GitHub Actions. We'll discuss what GitHub Actions are and how they can be utilized to continuously deploy modifications to a remote server. This approach reduces the requirement for manual intervention and minimizes downtime. By the conclusion of this post, you'll have a robust understanding of how to automate your deployment workflow and achieve faster, more reliable deployments with ease.
Create an Interactive Table of Contents for a Next.js Blog with Remark
Updated on · 9 min read|A well-organized and easily navigable table of contents significantly enhances the user experience, simplifying the process for readers to find the information they need. In this post, we'll go through the necessary steps to create an interactive table of contents for a Next.js blog using Remark, a powerful Markdown processor.
Copy to Clipboard Button In MDX with Next.js and Rehype Pretty Code
Updated on · 6 min read|This tutorial will guide you on how to create a 'copy to clipboard' button for the code snippets processed with Rehype Pretty Code plugin for syntax highlighting in Next.js. We'll be using Next.js 13+ with the 'app' directory enabled. By the end of this post, you'll be able to streamline code sharing and enhance the user experience on your Next.js website. In fact, this blog uses the exact functionality we'll be creating, so you can see the end result in action.