Nextjs custom server with fastify

Marco — Sat, 29 Jun 2024 10:49:23 +0000

React server-side rendering support for Fastify with Next.js framework

In this post we will create a custom server to start an app in nextjs with fastify underneath.

Let's create a new app in nextjs with npx

npx create-next-app@latest

Let's proceed with the installation of the dependencies

npm install fastify @fastify/static fastify-env dotenv

First let's create an .env file at the root

PORT=6100

On the root of the project, so to speak, next to the src folder we are going to create a new folder called server

Inside we create an index.js file
The content will look like this

require("dotenv").config();
const fastify = require("fastify")();
const fastifyStatic = require("@fastify/static");
const path = require("path");
const next = require("next");

const dev = process.env.NODE_ENV !== "production";
const host = process.env.HOST || "localhost";
const port = parseInt(process.env.PORT || "6100");

const app = next({ dev });
const handle = app.getRequestHandler();

(async () => {
  try {
    await app.prepare();

    fastify.register(fastifyStatic, {
      root: path.join(__dirname, "..", "public", "static"),
      prefix: "/static/",
    });

    fastify.all("/*", (req, reply) => {
      reply.hijack();
      handle(req.raw, reply.raw)
        .then(() => {
          reply.raw.end();
        })
        .catch((err) => {
          fastify.log.error(err);
          reply.raw.writeHead(500);
          reply.raw.end("Internal Server Error");
        });
    });

    await fastify.listen({ port, host });

    console.log(`Fastify server ready on port: ${port}`);
  } catch (err) {
    console.log(err);
    process.exit(1);
  }
})();

This is the package.json file with the related run and build scripts

{
  "name": "nextjs_fastify",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev-next": "next dev",
    "dev": "node server/index.js",
    "prod": "cross-env NODE_ENV=production node ./server/index.js",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@fastify/static": "^7.0.4",
    "dotenv": "^16.4.5",
    "fastify": "^4.28.1",
    "fastify-env": "^2.2.0",
    "next": "^14.2.4",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/next": "^9.0.0",
    "@types/node": "^20.14.9",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "cross-env": "^7.0.3",
    "typescript": "^5"
  }
}

Now all we have to do is run the desired scripts and that's it

To run the server in dev mode
npm run dev

To run the server in production mode you will first need to create the build version
npm run build

Only after the build has been completed can we launch the server in production mode with
npm run prod

And tadaan we will now have a client in nextjs with fastify under the hood 🚀

Thanks for reading

DEV Community: Marco

Nextjs custom server with fastify