Next.js Discord

Discord Forum

Trying to Deploy a NextJS project in place of an existing React project:

Unanswered
Oak apple gall wasp posted this in #help-forum
Open in Discord
Oak apple gall waspOP
As the title indicates, I'm converting an existing Docker-Compose / Dockerfile from a React deployment to NextJS 14 deployment.

Dockerfile: 
# build environment
FROM node:latest as builder
WORKDIR /usr/src/IENext
COPY . /usr/src/IENext
RUN npm run build
ENV NODE_ENV production
CMD [ "npx", "serve", "build" ]

# production environment
FROM nginx:stable-alpine
COPY --from=builder /usr/src/IENext/build /usr/share/nginx/html/
COPY --from=builder /usr/src/IENext/nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]


Docker-Compose:
  react-website:
    build: ../IENext/
    container_name: react-website
    depends_on:
      - barapi
    ports:
      - 80:80
      - 443:443
    networks:
      - barhub_network
    env_file:
      - '.env'
    environment:
      NODE_ENV: production
    volumes:
      - ./../files/:/file_repository


left container name as it was to minimize changes, changed path

My Next.config.mjs:
/** @type {import('next').NextConfig} */
const nextConfig = { webpack(config) {
    // Grab the existing rule that handles SVG imports
    const fileLoaderRule = config.module.rules.find((rule) =>
      rule.test?.test?.('.svg'),
    )

    config.module.rules.push(
      // Reapply the existing rule, but only for svg imports ending in ?url
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/, // *.svg?url
      },
      // Convert all other *.svg imports to React components
      {
        test: /\.svg$/i,
        issuer: fileLoaderRule.issuer,
        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
        use: ['@svgr/webpack'],
      },
    )

    // Modify the file loader rule to ignore *.svg, since we have it handled now.
    fileLoaderRule.exclude = /\.svg$/i

    return config
  },

  // ...other config
};


npm run build is successful:



Additional code etc in the messsage to follow

27 Replies

Oak apple gall waspOP
root@server:~/Projects/IENext# npm run build

> next_react@0.1.0 build
> next build

Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

   â–² Next.js 14.1.0

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (17/17)
 ✓ Collecting build traces
 ✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    209 B           120 kB
├ ○ /_not-found                          882 B          85.1 kB
├ ○ /about                               208 B           138 kB
├ ○ /contact                             204 B           138 kB
├ ○ /icon.ico                            0 B                0 B
├ ○ /legal                               200 B           115 kB
├ ○ /products                            200 B           115 kB
├ ○ /products/barbot                     200 B           115 kB
├ ○ /products/firems                     1.71 kB         121 kB
├ ○ /resources                           209 B           120 kB
├ ○ /signin                              1.53 kB         116 kB
├ ○ /signin/forgot                       1.48 kB         116 kB
├ ○ /signup                              1.12 kB         116 kB
├ ○ /store                               209 B           120 kB
â”” â—‹ /support                             209 B           120 kB
+ First Load JS shared by all            84.2 kB
  ├ chunks/69-ae51453826d454e0.js        28.9 kB
  ├ chunks/fd9d1056-608fb00f5228e2fe.js  53.4 kB
  â”” other shared chunks (total)          1.91 kB


â—‹  (Static)  prerendered as static content


 => [react-website builder 4/4] RUN npm run build                         28.3s
 => ERROR [react-website stage-1 2/3] COPY --from=builder /usr/src/IENext  0.0s
------
> [react-website stage-1 2/3] COPY --from=builder /usr/src/IENext/build /usr/share/nginx/html/:
------
failed to solve: failed to compute cache key: failed to calculate checksum of ref c6f0089d-02dd-4366-a06f-d86133e13865::ie7hpan04xzydoi4iz18cgg7k: "/usr/src/IENext/build": not found
root@server:~/Projects/ComposeOrchestration# npm run build


What am I missing? I'm not sure what else needs to be changed to deploy
I've tried what IU've been able to figure out thus far and have been unsuccessful
Oak apple gall waspOP
Any idea friends? Hoping to take care of this, I'm on and available and can answer any questions regarding setup
Pearls
To run a nextjs project in production you would firstly need to build it which would do all the compiling, etc. the server doesnt automatically start, after building you would need to run the 'npm run start' command to start the server in production mode.
@Pearls To run a nextjs project in production you would firstly need to build it which would do all the compiling, etc. the server doesnt automatically start, after building you would need to run the 'npm run start' command to start the server in production mode.
Oak apple gall waspOP
Where does it build to and how do I correctly configure it pointing to that location? It's not in usr/src/{proj_name}/out/ as I've seen suggested online
I have the dockerfile doing a from builder but the path is not correct so the nextjs server is not found to be deployed
@Oak apple gall wasp Where does it build to and how do I correctly configure it pointing to that location? It's not in usr/src/{proj_name}/out/ as I've seen suggested online
Pearls
lets say your project is in usr/test/project, this is where you run the npm run build command in, when building a '.next' folder in your project gets created (these are the build files), after building you just run npm run start in the same folder and your project will tsart
Oak apple gall waspOP
so ./.next/ will work as the path? I haven't seen it create a .next directory though, is it hidden or any such thing?
oh actually I see a .next directory
Oak apple gall waspOP
I don't know if that's present on the vps I'm deploying to
but I will try it right now
thank you
Pearls
No problem!
Oak apple gall waspOP
doing npm run build to test
ls
oops
wrong window
I don't see the .next visible there
ooh nevermind
ls -a shows it
now for deployment path do I just point it to that .next directory at the top level or a particular location within it?
nano Dockerfile
did it again 😂
@Pearls No problem!
Oak apple gall waspOP
if I'm understanding correctly this appears to be the correct path:

COPY --from=builder /usr/src/IENext/.next /usr/share/nginx/html/

as the previously run COPY . /usr/src/IENext command should make the IENext directory map to usr/src/IENext and then the .next is within it, the question is if it will work out of the box mapping to nginx that way as well
so it successfully deployed but I think the path is likely not properly configured