Learn how to use Subsequent.js with Docker and Docker compose a newbie’s information | Digital Noch

Learn how to use Subsequent.js with Docker and Docker compose a newbie’s information | Digital Noch

Subsequent.js is a well-liked and opinionated React primarily based meta-framework with a tagline of “Manufacturing grade React purposes that scale”. Utilizing Subsequent.js with Docker has a number of benefits. This tutorial will stroll you thru establishing and working a Subsequent.js challenge with Docker and Docker Compose, let’s get began!

Desk of contents #

What’s Subsequent.js #

Earlier than going additional. let’s analyze why you want Subsequent.js as a meta-framework on high of React. The talk is that React is only a library for constructing UI and never a framework. There are a number of methods and different libraries to do issues in React (identical as JavaScript). For example, there are not less than 6 libraries to do state administration in React.

That is the place Subsequent.js and its opinionated choices shine. Subsequent.js manufacturers itself as “The React Framework for Manufacturing” and it’s open supply, in fact. Created by Vercel, Subsequent.js is reportedly utilized by Nike, Realtor, Door Sprint, and TypeForm to call some. Some options of Subsequent.js embrace hybrid static and server rendering, TypeScript help, and sensible bundling.

The principle function and motive for Subsequent.js I imagine is that it’s React++. By that I imply,

Subsequent.js helps you recover from the choice fatigue that comes with React (and JavaScript typically) because it makes these choices so that you can an awesome extent following the “finest practices”.

Don’t overlook although, Subsequent.js is a layer on high of React.js. It’s the “framework” layer. For one challenge we labored with in 2020, the necessity was to do Server facet rendering, and React didn’t do it out of the field. This can be a use case to make use of Subsequent.js. Sadly, we went with one other resolution however hindsight Subsequent.js would have been the most suitable choice then.

Subsequent.js recognition #

Subsequent.js is the most well-liked React meta-framework on the market. As per NPM traits, it was downloaded 4.23 million instances towards the tip of Oct-2022. React is downloaded much more than Gatsby, Nuxt, Razzle, and Remix mixed that are a few of its opponents. As the image speaks:

Next.js and its popularity recently

If it was a recognition contest, Subsequent.js blows the opposite competitor out of the water. Being backed by Vercel it’s also straightforward to host a Subsequent.js utility on Vercel. Within the subsequent part, you’ll be taught why to make use of Subsequent.js with Docker.

Why use subsequent.js with Docker #

Much like Dockerizing different purposes, once you put the Subsequent.js utility on a docker container it has some benefits. There first one is that you simply ship the entire stack not solely your code, the stack contains the OS, some other language/executables in particular variations and your code. This implies you recover from works on my machine syndrome.

Along with making it moveable, Docker additionally helps to run a number of copies of your utility that may be scaled horizontally. As spinning up a docker container is comparatively straightforward and low-cost this helps with scaling your purposes a lot simpler with a container orchestrator like Kubernetes. All of those advantages absolutely apply to your Subsequent.js app.

As Subsequent.js additionally helps on server facet rendering and API routes, the purposes utilizing these options can’t be cached on the CDN. That is the place if the Subsequent.js app is Dockerized it may be simply deployed right into a Kubernetes cluster and even on serverless containers.

Conditions #

Earlier than you bounce into the code, under are some requisites:

  • You must have Node.js put in in your system ideally the most recent LTS which is Node.js v 18 on the time of writing. Equally, some data of npm and npx may even be wanted.
  • Have Docker put in and docker-compose put in in your machine
  • Any prior expertise with Subsequent.js is helpful however not mandatory.

Within the subsequent part, you’ll set up Subsequent.js with out Docker after which Dockerize it.

Set up Subsequent.js with out Docker #

For this tutorial, you’ll use the API Routes instance from the official Subsequent.js examples. You possibly can set up this instance by working:

npx create-next-app --example api-routes api-routes-app

It should present an output just like the one under:

Next.js create next app with API routes example CLI command

To check out if the instance is working correctly you may execute:

cd api-routes-app
npm run dev

It should run the server and now you may entry the app at which is able to appear to be the next:

Next.js running locally without Docker

You possibly can click on the names and mess around. Within the subsequent part, you’ll Dockerize this instance Subsequent.js app which has APIs for the individuals.

Docker picture for Subsequent.js #

To Dockerize the above app, you’ll add the next Dockerfile on the basis of the challenge:

FROM node:18-alpine AS deps
RUN apk add --no-cache libc6-compat

COPY package deal.json package-lock.json ./
RUN  npm set up --production

FROM node:18-alpine AS builder
COPY --from=deps /app/node_modules ./node_modules
COPY . .


RUN npm run construct

FROM node:18-alpine AS runner

ENV NODE_ENV manufacturing

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder --chown=nextjs:nodejs /app/.subsequent ./.subsequent
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package deal.json ./package deal.json

USER nextjs



CMD ["npm", "start"]

This can be a multi-stage Dockerfile which begins with a deps stage. On this first stage which begins from the Node.js Alpine picture. Then it provides lib6-comat package deal wanted to construct Subsequent.js. Because the stage known as deps for dependencies, on this stage the npm modules are put in subsequent.

After that, you add the builder stage the place the node modules are copied and the npm run construct command is executed to construct the Subsequent.js challenge. You might be additionally disabling the Subsequent.js telemetry, this velocity up the construct a bit.

After that, you outline the runner stage. That is the principle stage that runs Subsequent.js. Right here you employ the Node.js 18 Alpine picture just like all of the above phases. Then add a gaggle and person for Subsequent.js. It’s also necessary for safety. After that, you copy the following folder from the builder stage, and node modules and package deal.json file. Then you definitely outline the person to be nextjs that can execute the command to run the Subsequent.js challenge. Ultimately, you run npm begin which is able to begin the container with that command.

You possibly can host your Subsequent.js app with free Node.js internet hosting suppliers like Vercel. Within the subsequent half you’ll find out about including Docker Compose to the Subsequent.js app.

Including Docker compose for Subsequent.js #

You possibly can run Subsequent.js with simply the above Docker file however it will likely be a protracted command. To maintain issues easy you’ll introduce a brand new docker-compose.yml file with the next contents on the root of the challenge:

model: '3.8'
      context: ./
      goal: runner
      - .:/app
    command: npm run dev
      - "3000:3000"
      NODE_ENV: improvement

Right here you outline a service referred to as internet and the stage/goal to be runner. You hyperlink up the native listing to /app on the container, this may assist with sizzling reload on native improvement because the information will likely be overwritten domestically on every save.

Then you definitely override the command to be npm run dev and hyperlink up native port 3000 to container port 3000. Lastly, you outline the NODE_ENV to be improvement.

An important element you must keep in mind right here is, the above Docker file is manufacturing prepared and Docker compose on this case is designed for use for improvement solely.

Run Subsequent.js with docker compose #

To run the Subsequent.js challenge with docker-compose you’ll construct the docker picture after which run the container. To do that you’ll run:


You might be instructing docker to make use of Buildkit which is able to velocity up the docker construct course of. The command if ran efficiently will end up as follows:

Next.js Docker build with Docker compose and build kit

To run Subsequent.js with Docker and docker-compose you may then run:

docker-compose up

It should present the identical output as working the app with out docker once you hit in your favourite browser after docker-compose up runs with none error:

Next.js running locally with Docker

If change the pages/index.tsx to return the next on the finish of the file:

return (
<h2>With Docker</h2>
knowledge.map((p: Particular person) => (
<PersonComponent key=p.id individual=p />

The modifications will likely be picked up fairly quick and present up on the browser as follows:

Next.js running with Docker and Docker compose locally

Congrats! You may have efficiently Dockerized a Subsequent.js challenge. Because the app has been Dockerized you may run it on any service with or with out Kubernetes. You may as well check out PostgreSQL with Docker and Docker compose and join it with you Subsequent.js utility.

Thanks for following alongside, you’ll find all of the code of this tutorial on this GitHub repository. For the docker-specific code please discuss with this pull request.

Conclusion #

On this step-by-step information, you realized about Subsequent.js and its recognition. Then you definitely put in one of many Subsequent.js examples with API routes and first ran it with out Docker. After that, you added the Dockerile and the docker-compose file. With the 2 information added you then constructed the docker picture after which ran it domestically with docker-compose up.

I hope you have got realized the right way to dockerize any Subsequent.js app. Continue to learn!

#Subsequent.js #Docker #Docker #compose #freshmen #information

Related articles


Leave a reply

Please enter your comment!
Please enter your name here