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.
Top comments (7)
Hey, great guide, I loved it. Structured, concise, clear.
I have a question though: Will this really preserve SSG, ISR and SSR? Express, as the server, is what takes care of deciding whether to send a pre-filled HTML (SSG) or not, no? Here, next is only in the frontend.
Yup, this will preserve it. I think the naming of the folders is a bit confusing with “client” and “server”, at least that’s what tripped me up.
Next is still operating as the first point of contact, and handling pages and all that. It’s just when making a request to the api the route gets rewritten to point to the express server rather than handling it with a serverless function. Express is responsible for handling the data and then it’s returned to Next to assemble and render.
Thanks for the article @wilmela!
how to host the app?
I need them to be under same domain,
I don't want to host them under two urls.
Utilize Next.js for [yourdomain.com] to create dynamic interfaces and Express.js for [api.yourdomain.com] to build a backend. This separation allows for easier development, maintenance, and scaling of your application, providing a more consistent user experience across different clients.
Nice article.
So what happens when you want to host the app? Do you host them separately or on the same domain? Either of the cases, how?
Separately ofcourse.
Hi friend. Can I ask something? Do you create nextjs with app router?