Next.js Discord

Discord Forum

Github Actions + Next /app Build

Answered
Red-headed Woodpecker posted this in #help-forum
Open in Discord
Red-headed WoodpeckerOP
Hey all,

I'm running into an issue where my build run failes on github actions but otherwise succeeds when I deploy to vercel or build locally.

I can replicate this by cloning a clean version of the app directory example and then running
pnpm i
pnpm build //no dev run before doing this

(you can find the local apis in /app/api/)

It seems that locally, running dev gets (caches?) the data from the local apis, but github actions don't have this context so trying to build there always fails

How can I make sure the build command works with local apis?
Answered by DirtyCajunRice | AppDir
you need to set it on the page to stop that
View full answer

13 Replies

Red-headed WoodpeckerOP
Additional context in case it's needed

Here's the error
[=   ] - info Generating static pages (23/39)
Error occurred prerendering page "/examples/loading". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11413:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
http://localhost:3000
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11413:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED ::1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -61,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 3000
  }
}

Error occurred prerendering page "/examples/not-found". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11413:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
- info Generating static pages (39/39)

> Export encountered errors on following paths:
        /examples/context/page: /examples/context
        /examples/error-handling/page: /examples/error-handling
        /examples/hooks/page: /examples/hooks
        /examples/layouts/page: /examples/layouts
        /examples/loading/page: /examples/loading
        /examples/not-found/page: /examples/not-found
        /examples/route-groups/(main)/page: /examples/route-groups
        /examples/route-groups/(marketing)/blog/page: /examples/route-groups/blog
And here's the github actions file

name: Build
on: [push]
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Use Node 18.x
        uses: actions/setup-node@v3
        with:
          node-version: 18.x

      - uses: pnpm/action-setup@v2
        name: Install pnpm
        id: pnpm-install
        with:
          version: 7
          run_install: false

      - name: Get pnpm store directory
        id: pnpm-cache
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT

      - name: Cache pnpm modules
        uses: actions/cache@v3
        with:
          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
          key: ${{ runner.OS }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.OS }}-pnpm-store-

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Build
        run: pnpm build
        # env:
        # NODE_ENV: production
DirtyCajunRice | AppDir
force-dynamic
or dont point to local apis
Red-headed WoodpeckerOP
Thanks. I don't plan to use local APIs in production apps, but right now I'm just trying to understand app by playing with the example, and getting it set up in my usual build context (hence gh actions)

How/where do I use force-dynamic?

I've tried googling but can't find any documentation on it
DirtyCajunRice | AppDir
2 things
1. if you are calling a local api, you should be in a client page. If you are in a server page, you have taken an unnecessary step.
2. look in the docs at “route segment config”
Red-headed WoodpeckerOP
Right now I'm using the exact same config as the vercel/next team set up here: https://app-router.vercel.app/

I haven't changed anything except moving it into a folder called /example/

I've tried adding in export const dynamic = 'force-dynamic'; into the api routes (app/api/categories/route.ts) but it doesn't seem to be changing anything
DirtyCajunRice | AppDir
no not the api routes
the pages
the pages themselves are attempting to be statically rendered, and therefore querying the api route prior to build
DirtyCajunRice | AppDir
you need to set it on the page to stop that
Answer
Red-headed WoodpeckerOP
Ahh that makes sense.

I went through and added it to all the layout.tsx pages where an error was occurring.

Thanks! That fixed it. ✅