Topchart

How do I deploy this?

Vercel

We recommend deploying to Vercel. It makes it super easy to deploy NextJs apps.

• Push your code to a GitHub repository.
• Go to Vercel and sign up with GitHub.
• Create a Project and import the repository you pushed your code to.
• Add your environment variables.
• Click Deploy
• Now whenever you push a change to your repository, Vercel will automatically redeploy your website!

Docker

You can also dockerize this stack and deploy a container.

1. In your next.config.mjs, add the output: "standalone" option to your config.

2. Create a .dockerignore file with the following contents:

   .dockerignore

   Dockerfile
   .dockerignore
   node_modules
   npm-debug.log
   README.md
   .next
   .git
   

3. Create a Dockerfile with the following contents:

   Dockerfile

   # Install dependencies only when needed
   FROM node:16-alpine AS deps
   # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
   RUN apk add --no-cache libc6-compat
   WORKDIR /app
   
   # Install dependencies based on the preferred package manager
   COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
   RUN \
      if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
      elif [ -f package-lock.json ]; then npm ci; \
      elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
      else echo "Lockfile not found." && exit 1; \
      fi
   
   
   # Rebuild the source code only when needed
   FROM node:16-alpine AS builder
   WORKDIR /app
   COPY --from=deps /app/node_modules ./node_modules
   COPY . .
   
   # Next.js collects completely anonymous telemetry data about general usage.
   # Learn more here: https://nextjs.org/telemetry
   # Uncomment the following line in case you want to disable telemetry during the build.
   # ENV NEXT_TELEMETRY_DISABLED 1
   
   RUN yarn build
   
   # If using npm comment out above and use below instead
   # RUN npm run build
   
   # Production image, copy all the files and run next
   FROM node:16-alpine AS runner
   WORKDIR /app
   
   ENV NODE_ENV production
   # Uncomment the following line in case you want to disable telemetry during runtime.
   # ENV NEXT_TELEMETRY_DISABLED 1
   
   RUN addgroup --system --gid 1001 nodejs
   RUN adduser --system --uid 1001 nextjs
   
   # You only need to copy next.config.js if you are NOT using the default configuration
   # COPY --from=builder /app/next.config.js ./
   COPY --from=builder /app/public ./public
   COPY --from=builder /app/package.json ./package.json
   
   # Automatically leverage output traces to reduce image size
   # https://nextjs.org/docs/advanced-features/output-file-tracing
   COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
   COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
   
   USER nextjs
   
   EXPOSE 3000
   
   ENV PORT 3000
   
   CMD ["node", "server.js"]

4. You can now build an image to deploy yourself, or use a PaaS such as Railway's automated Dockerfile deployments to deploy your app.