Forem: MILIND D JAIN

Database connection in NextJS (App Router)

MILIND D JAIN — Sun, 04 Jan 2026 16:50:06 +0000

In today's post, we will be learning about the good way of connecting the NextJS application to the database via PrismaORM.

For those who are new to Prisma ORM, here is the quick gist of it. Prisma ORM ( Object Relational Mapping) is the tool that makes communication with the database easy. So, let's say you want to connect to any database, be it MySQL, PostgreSQL, SQLite, or MongoDB, then the straightway is to write a query that is understood by the database we are using.

Now, this way is not wrong, but it gives rise to many problems like -

The developer needs to know the proper syntax for the query 😟.
A small mistake can take hours to debug.
More vulnerable to errors, which in turn makes switching to a different database difficult.

ORM / ODM are saviours here, they work as the middle translator between the database and our application. So, no need to worry about the actual syntax of the database we want to use.

Now, let's talk about a good way of connecting the Prisma client for database connection in the NextJS app router. Here is the code, followed by the explanation in brief detail.

import { PrismaClient } from "@/generated/prisma/client";
import { PrismaPg } from "@prisma/adapter-pg";

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};

const connectionString = `${process.env.DATABASE_URL}`;

const adapter = new PrismaPg({connectionString});

export const prisma = globalForPrisma.prisma || new PrismaClient({adapter});


if(process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

Creating a prisma client and connecting to the database can be done in 2 to 3 lines, but why so much of surrounded code? Here is the reason -

Let's say when we deploy our NextJS application, then it is not like we have only one instance, but it is loaded to multiple instances. Means multiple instances are already sitting to handle traffic, but that does not mean we have that many db connections.

Whenever a user hits the application from the browser, that request creates a new db connection on the instance it hits. Now, if another request comes to that same instance, then via module caching creation of a new Prisma client is prevented.

But in the case of a non-prod environment, like development, we have hot-reloading, hence to prevent db connection on each hot reload, we use a global store to cache it.

All about routing in react (Part 2) ft. react-router-dom

MILIND D JAIN — Sun, 10 Mar 2024 16:23:28 +0000

This post is sequel of my previous post on the routing on react.
Please check that before following this,
"https://dev.to/jmilind1234/all-about-routing-in-react-part-1-ft-react-router-dom-2fd1".
In my previous post I wrote about how to create the routing configuration and difference between server-side-routing and client-side-routing.

Now here, we are going to see about the following topics -

children routes
getting error information in navigation and showing custom error page.

So, let start with children routes. These are also referred as nested routes. Lets, say we have 3 routes as "/", "/about", "/contact" and we want that these 3 pages share same layout, means to say all have same header, footer, sidebar etc.
So, one way is that we create router configuration as we did and on each page we call header, footer and sidebar with page specific component.

This is fine, it will work.

But not smart way. Smart way is to define paths inside children of the "/". Lets see a code example for same.

export const appRouter = new createBrowserRouter([
  {
    path: "/",
    element: <AppLayout />,
    errorElement: <Error />,
    children: [
      {
        path: "/",
        element: <Body />,
      },
      {
        path: "/about",
        element: <About />,
      },
      {
        path: "/contact",
        element: <Contact />,
      },
      {
        path: "/restaurant/:resId",
        element : <RestaurantMenu/>
      }
    ],
  },
]);

Here, for "/" path we have mentioned element, that's basically defines layout for its children routes, errorElement defines what to show if we try to access undefined route. We have also used children prop, that is a place where all nested routes are defined, like for "/" we will show <Body/> component and similarly for other 3.

But wait, how and where <About/> will come and layout will be shared.

Well here comes the powerful <Outlet/> component that comes from react-router-dom package.

const AppLayout = () => {
  return (
    <div className="app">
      <Header />
      <Outlet />
    </div>
  );
};

So, for "/about" path, <Outlet/> will be replaced by <About/> and same for rest 3. Here, <Header/> will be shared by all the children routes.

This was all about nested routes or children routes and how layout is shared and power of <Outlet/> component.

Now lets begin with custom error page and how to get navigation error information.

First part we already covered while creating routing configuration ( remember - errorElement).

To get the navigation error information, we have a hook "useRouteError", this also comes from "react-router-dom".

In my next post, we will study about query params and route params.

Thanks for reading the post.😊

All about routing in React (Part 1) ft. react-router-dom

MILIND D JAIN — Fri, 08 Mar 2024 07:23:29 +0000

Here, in this post we are going to learn about the routing in react applications using react-router-dom v6.

React-router-dom is a powerful library that is used to handle the routing mechanism in the react application. Its special because in addition to routing it also provides the way to achieve client-side-routing instead of server-side-routing.

Before getting to point on how it provides the client-side-routing, lets discuss in short about client-side-routing and server-side-routing.

So basically in old web apps where hyperlinks (to navigate to other pages) were mentioned using anchor tag, used to make the request to the server and server used to send the page data in response. Even if in react we use anchor tags to navigate we can see that as we click on hyperlinks it will make a request to server and server will return the landing page of our app (where a div with id root is placed), and browser will paint on to that page.
Such kind of routing is called server-side-routing.

Now, another comes client-side-routing, where for getting the content of new page (page to which we want to land), webapp will not make a request to the server.

So how and from where that page content will come from? 🤔
Well in react when we first time hit the domain of our app, all the components are loaded. And these already loaded components will be only served when we navigate to page. Simple !!!

This was about the two types of routing that is used across all web apps.

Now, lets discuss on about "how to start with react-router-dom, to handle routing?"

So, to start with routing we first need to convey our react app all important information about routes and what to show.

This is done by creating routing configuration and wrap our whole app with this routing configuration.

import { Outlet, createBrowserRouter, useLocation } from "react-router-dom";
export const appRouter = new createBrowserRouter([
  {
    path: "/",
    element: <AppLayout />,
    errorElement: <Error />,
  },
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/contact",
    element: <Contact />,
  },
]);

So, here basically we mentioned -

Number of routes.
Path of routes.
Component to display on each route.

Remember - if component is missed than <Outlet/> will be rendered, which is by default null (means a white screen)

But this is not enough, because still our app is not aware about the paths or routes. To make our app aware about routes and what to show for each path, we need to wrap whole app inside the router provider.

import { RouterProvider } from "react-router-dom";
import AppLayout from "./src/AppLayout";
import ReactDOM from "react-dom/client";
import { appRouter } from "./src/AppLayout";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <RouterProvider router={appRouter}>
    <AppLayout />
  </RouterProvider>
);

This AppLayout is the starting point of our react-app.

Now our app is aware about all the routes. 🚀

This was about basic routing, but lets say if requested path is not aware than? What to show? How to handle?
No worries, errorElement will take care of it.

In the next post/article we will resume about nested routes, dynamic routing etc. 😊