Integrating Express.js Server with Next.js-13: Unleash the Power of Combined Frameworks

Introduction:

Next.js-13 and Express.js are two powerful frameworks in the JavaScript ecosystem, each offering distinct advantages. Next.js-13 provides features like server-side rendering (SSR) and static site generation (SSG), along with an excellent developer experience. On the other hand, Express.js is known for its flexibility and robustness in building server-side applications. By combining these frameworks, developers can harness the strengths of both to create versatile web applications. In this blog post, we will explore the steps to connect an Express.js server with Next.js-13 seamlessly.

Benefits of Next.js-13:

Next.js-13 offers a host of advantages that contribute to its popularity among developers:

Server-side rendering (SSR): Next.js-13 enables rendering React components on the server, leading to faster page loading and improved search engine optimization (SEO).
Static site generation (SSG): It generates static HTML pages during the build process, resulting in optimal performance and reduced server load.
Excellent developer experience: Next.js-13 provides a delightful development experience with features like automatic code splitting, hot module reloading, and built-in TypeScript support.

Benefits of Express.js:

Express.js is a widely adopted framework for building server-side applications with Node.js. Some key advantages of using Express.js include:

Flexibility: Express.js takes a minimalistic, unopinionated approach, allowing developers to structure applications as per their specific needs.
Middleware ecosystem: Express.js boasts a vast collection of middleware modules, making it easy to add additional functionality to the server.
Robustness: With its mature and stable ecosystem, Express.js has proven to be reliable in handling various server-side tasks and managing routes efficiently.

Combining Next.js-13 and Express.js:

By integrating an Express.js server with Next.js-13, developers can leverage the best of both worlds. Express.js can handle backend logic, routing, and API endpoints, while Next.js-13 takes care of rendering React components, server-side rendering, and static site generation. This powerful combination empowers developers to build dynamic web applications that benefit from the unique features offered by each framework.

Steps to Create Both Projects:

First, let's create a basic express server.
1.mkdir exp-next && cd exp-next
2.npm init -y
3.npm install express cors
4.mkdir src && cd src && touch index.js

In the package.json file add the line "type":"module", to enable the use of "import" statement and "start": "node src/index.js" script

Next, in your index.js file add the following lines to create a basic express server which returns an array of users.

Finally npm start to run your server. If everything is ok, you will see "App listening on port 5000!" on your console.

Next, we will create out Next.js-13 app. Run the following commands on your command prompt.
1.mkdir next-exp && cd next-exp
2.npx create-next-app@latest
3.What is your project named? . using . will install nextjs in the current folder with the folder name next-exp
4.Accept all default settings.
5.npm install --save express

Next.js Settings

Open the next.config.js file and make the following changes.

Client component

In the app folder, open page.tsx and add the following code.

Run npm start in your express project to start the server and npm run dev in your next.js project.

Notice we did not pass any other option to the fetch function, just the url. Nextjs by default uses fetch(url, { cache: 'force-cache' }) which automatically caches our users.

Note: Next.js recommends the use of SWR or React-Query for data fetching on the client side as against useEffect hook.

Server component

In the app folder, following open page.tsx and replace the previous code with the following lines.

Here we are passing { cache: 'no-cache' } option to the fetch function to disable Next.js default behaviour and always refetch users when we make a request.

That's it! Now you can enjoy all the goodies Next.js-13 has to offer while keeping your existing express.js backend.
You can find the code here.

Thanks for reading.