Next.js is a React framework that enables functionality such as server-side rendering and generating static websites for React-based web applications.
When working on a complex project with both Storybook and Next.js, you might run into issues during the build process. I recently hit a frustrating roadblock when my Next.js build started compiling Storybook files. It turned out that the build was trying to process *.stories.* files, which shouldn’t have been included. To avoid such conflicts,
When working with Next.js, the default port for the development server is set to 3000. While this is convenient for many projects, there are times when we need to run our application on a different port, such as 5000. Maybe it’s a port conflict, or perhaps it’s just a personal preference. Whatever the reason, configuring
In Next.js, especially when using the new app directory structure, you might encounter the following error when attempting to pass a function from a Server Component to a Client Component: This error happens because Next.js enforces a strict separation between server-side and client-side code. Server-side functions can’t be passed directly to Client Components, as they
Introduction While working with Next.js 14, you may encounter an error that says, “Error: NextRouter was not mounted”. This issue commonly arises when using the useRouter hook, especially in projects using the app directory. This blog post will walk you through the causes of this error and provide a step-by-step solution specific to Next.js 14’s
When working on a Next.js project, ensuring code consistency and cleanliness is crucial for maintaining quality across teams. One of the best ways to do this is by using tools that automate code formatting and linting. Traditionally, developers have used separate tools like ESLint for linting and Prettier for formatting. However, there’s a new, powerful
As a developer working with Next.js, I’m always eager to explore and implement the latest features. Next.js 14 introduces some powerful tools for structuring applications: Layouts and Templates. At first glance, these concepts might seem similar, but they have distinct purposes and behaviors that can significantly impact how you organize your project. In this post,
When working with databases in production environments, ensuring a secure connection is essential. One of the ways to do this is by using SSL/TLS encryption, which can be enforced through the use of a Certificate Authority (CA) certificate. In this post, I’ll walk you through how I set up a Prisma project with Next.js to
One of the powerful features of Next.js 14 is its ability to blend client and server components seamlessly. As I’ve been working with Next.js 14, I’ve encountered scenarios where sorting data on a page based on user input becomes necessary. In particular, if you’re building a grid-based UI and want to allow users to sort
In modern web development, ensuring that your application can gracefully handle database connection issues is crucial. Recently, I encountered a problem where my Next.js app would not automatically reconnect to my PostgreSQL database after a restart, causing page loads to hang. Through some trial and error, I found a robust solution using TypeScript, which I
Navigating the intricacies of Next.js can be challenging, but understanding how to set up optional dynamic routes with metadata can significantly enhance your web application’s SEO and usability. In this blog post, I’ll guide you through creating a Next.js 14 app with optional dynamic routes and setting up canonical URLs using metadata. By the end,
Handling conditional redirects in Next.js 14 using the new app directory and TypeScript is straightforward and powerful. In this guide, we walk through setting up a 302 redirect based on a URL parameter, such as a zip code. If the zip code matches a specific value, users are redirected to the home page; otherwise, the page content is rendered normally. This technique enhances user experience by ensuring seamless navigation and can be applied to various scenarios, such as authentication or feature access redirects.
When working on web applications, creating an intuitive and responsive user interface is paramount. One feature that significantly enhances user experience is an autocomplete input field. In this blog post, I will guide you through creating a zip code autocomplete component using Next.js 14, Mantine, and TypeScript. This component will dynamically fetch suggestions from an