> ## Documentation Index
> Fetch the complete documentation index at: https://docs.infrastack.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Dockerize your Next.js application with OpenTelemetry via infrastack.ai

> Learn how to dockerize your Next.js application with OpenTelemetry via infrastack.ai

export const JsIcon = ({size = "24"}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width={size} height={size} fill="#708090"><path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z" /></svg>;

export const GithubIcon = ({size = "24"}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width={size} height={size} fill="#708090"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" /></svg>;

#### What you will learn

* How to dockerize your Next.js application with OpenTelemetry via infrastack.ai

#### Prerequisites

* Docker installed on your machine
* An infrastack.ai account
* A Next.js application configured with the infrastack.ai SDK, see [Integrate OpenTelemetry for Next.js with infrastack.ai](/documentation/integrate-opentelemetry-for-nextjs-with-infrastack)

<Info>
  The application should be on the `nodejs` runtime. The `edge` runtime is not supported at this time.
</Info>

<CardGroup cols={1}>
  <Card title="Follow the example project on GitHub" href="https://github.com/infrastackai/infrastack/tree/main/examples/nextjs" icon={<GithubIcon />} />
</CardGroup>

#### Overview

Docker is a platform for building, running, and shipping applications with ease. With the power of infrastack.ai and OpenTelemetry, you can get comprehensive observability for your Next.js application.

After you have configured your application with the infrastack.ai SDK by following the [Integrate OpenTelemetry for Next.js with infrastack.ai](/documentation/integrate-opentelemetry-for-nextjs-with-infrastack) guide, you can dockerize your application by following these steps:

<Steps>
  <Step title="Configure next.config.mjs">
    In your `next.config.mjs` file, :

    ```javascript theme={null}
    const nextConfig = {
      output: 'standalone', // For web services/Docker
      experimental: {
        instrumentationHook: true, // To enable instrumentation
      },
    };

    export default nextConfig;
    ```

    This will allow the Next.js application to be run as a web service.
  </Step>

  <Step title="Create a Dockerfile">
    Create a `Dockerfile` in the root of your project with the following content:

    ```dockerfile Dockerfile theme={null}
    COPY package.json package-lock.json ./
    RUN npm ci

    FROM base as builder
    WORKDIR /app
    COPY --from=deps /app/node_modules ./node_modules
    COPY . .

    RUN npm run build

    FROM base as runner
    WORKDIR /app

    ENV NODE_ENV production

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

    COPY --from=builder /app/public ./public

    RUN mkdir .next

    RUN chown nextjs:nodejs .next

    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 HOSTNAME="0.0.0.0" node server.js
    ```

    In this optimized dockerfile, we are using the `base` image as the base image for the builder and runner stages. The `builder` stage is used to build the application and the `runner` stage is used to run the application.
    <Tip>You can change the port if you will not be using the default port of 3000.</Tip>
  </Step>

  <Step title="Create a dockerignore file">
    Create a `.dockerignore` file in the root of your project with the following content:

    ```dockerignore .dockerignore theme={null}
    Dockerfile
    .dockerignore
    node_modules
    .next
    README.md
    npm-debug.log
    !.next/static
    !.next/standalone
    .git
    ```

    This will prevent unnecessary files from being included in the Docker image. You can add more files to the ignore list if you see fit.
  </Step>

  <Step title="Build the Docker image">
    Build the Docker image with the following command:

    ```bash theme={null}
    docker image build -t nextjs-example:latest .        
    ```

    <Tip>You can change the name `nextjs-example:latest` to your desired name and tag.</Tip>
  </Step>

  <Step title="Run the Docker container">
    Run the Docker container with the following command:

    ```bash theme={null}
    docker container run -p 3000:3000 -e INFRASTACK_API_KEY=<your-infrastack-api-key> nextjs-example:latest
    ```
  </Step>

  <Step title="Visit your application">
    You can verify that the application is working by navigating to `http://localhost:3000` in your web browser.
    <Tip>Now, you can check your data in the [infrastack.ai](https://app.infrastack.ai) dashboard.</Tip>
  </Step>

  <Step title="Optional: Deploy to a cloud provider">
    You can push the Docker image to a registry such as [Docker Hub](https://hub.docker.com) or [GitHub Container Registry](https://docs.github.com/en/packages/working-with-a-github-package-registry/working-with-the-container-registry) and then deploy it to a cloud provider of your choice.
  </Step>
</Steps>

<CardGroup cols={2}>
  <Card title="Javascript SDK Reference" href="/sdk-reference/javascript/configuration" icon={<JsIcon />} />

  <Card title="Explore the Next.js example project" href="https://github.com/infrastackai/infrastack/tree/main/examples/nextjs" icon={<GithubIcon />} />
</CardGroup>
