Next.js Discord

Discord Forum

How to deploy locally-built version of Next.js package to Vercel with a testing app

Unanswered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
Hi,

I am trying to test out a change to the Next.js codebase. I would like to deploy a testing app to Vercel that uses my locally-built version of Next.js. I read the doc about building https://github.com/vercel/next.js/blob/489a52800326b2b92dc0d4d147ae2ee07bf95b3d/contributing/core/building.md and I’m able to do that OK. I’m also able to get my testing app when running locally to use the local version of Next.js using pnpm add and pnpm dev.

After building my local Next.js I’m trying to figure out how to get my testing app to use it when I deploy to Vercel. I see there is a dist directory generated but I’m not sure how to get that to be used by my testing app. I think I am missing something basic, I spent some time searching but was not able to find the answer. Thanks in advance for reading.

19 Replies

vercel build then vercel deploy --prebuilt
Check the cli documentation for more information
American black bearOP
Thanks @joulev, I tried that but I got this output:
vercel build                                                             
Vercel CLI 32.4.1
Detected `pnpm-lock.yaml` version 6 generated by pnpm 8
WARNING: You should not upload the `.next` directory.
Installing dependencies...
Lockfile is up to date, resolution step is skipped
Already up to date

Done in 362ms
Detected Next.js version: 13.5.5-canary.7
Running "pnpm run build"

> nextjs-testing-project@0.1.0 build /Users/sf/experiments/nextjs-datadog-workshop
> next build

   Linting and checking validity of types  ..Failed to compile.

./pages/_app.tsx:5:11
Type error: 'Component' cannot be used as a JSX component.
  Its element type 'Component<any, any, any> | ReactElement<any, any> | null' is not a valid JSX element.
    Type 'Component<any, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<any, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/sf/experiments/nextjs-testing-project/node_modules/.pnpm/@types+react@18.2.28/node_modules/@types/react/index").ReactNode'.
            Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
              Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.

  3 | 
  4 | export default function App({ Component, pageProps }: AppProps) {
> 5 |   return <Component {...pageProps} />
    |           ^
  6 | }
  7 | 
 ELIFECYCLE  Command failed with exit code 1.
Error: Command "pnpm run build" exited with 1
Searching online it seems like there is something wrong with the types but not sure exactly what. The package.json looks like this:
{
  "name": "nextjs-testing-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@datadog/browser-rum": "^4.50.1",
    "@opentelemetry/api": "^1.4.1",
    "@vercel/otel": "^0.3.0",
    "next": "link:../../dev/next.js/packages/next",
    "react": "link:../../dev/next.js/node_modules/react",
    "react-dom": "link:../../dev/next.js/node_modules/react-dom"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "13.5.4",
    "typescript": "^5"
  }
}

after running pnpm add ../../dev/next.js/{packages/next,node_modules/{react,react-dom}} from https://github.com/vercel/next.js/blob/canary/contributing/core/developing-using-local-app.md
American black bearOP
Still not sure why I was getting that error ^ but the testing project was using pages router and I tried with another project that uses app router (doesn't matter for what I'm testing) and stopped getting the issue above while building and I was able to deploy it
It's able to deploy fine and I can load the site, but when I send a request to an API route I get a 500 with this error:
LOGS    Name: collector    State: Already subscribed    Types: [Platform]
2023-10-13T19:03:09.041Z    undefined    ERROR    Cannot find module 'next/dist/server/next-server.js'
Require stack:
- /var/task/___next_launcher.cjs
2023-10-13T19:03:09.042Z    undefined    ERROR    Did you forget to add it to "dependencies" in `package.json`?
EXTENSION    Name: collector    State: Ready    Events: [SHUTDOWN, INVOKE]
INIT_REPORT Init Duration: 466.34 ms    Phase: invoke    Status: error    Error Type: Runtime.ExitError
START RequestId: 7707a139-b1fa-4652-a669-88130ae1d36a Version: $LATEST
RequestId: 7707a139-b1fa-4652-a669-88130ae1d36a Error: Runtime exited with error: exit status 1
Runtime.ExitError
END RequestId: 7707a139-b1fa-4652-a669-88130ae1d36a
REPORT RequestId: 7707a139-b1fa-4652-a669-88130ae1d36a    Duration: 479.77 ms    Billed Duration: 480 ms    Memory Size: 1024 MB    Max Memory Used: 35 MB

Which sounds like the package is not being built correctly, but I'm not sure where to look
I'm wondering if the link: statements in the package.json aren't working when I run pnpm build? Not sure if there is another way to do it
@American black bear Thanks <@484037068239142956>, I tried that but I got this output: vercel build Vercel CLI 32.4.1 Detected `pnpm-lock.yaml` version 6 generated by pnpm 8 WARNING: You should not upload the `.next` directory. Installing dependencies... Lockfile is up to date, resolution step is skipped Already up to date Done in 362ms Detected Next.js version: 13.5.5-canary.7 Running "pnpm run build" > nextjs-testing-project@0.1.0 build /Users/sf/experiments/nextjs-datadog-workshop > next build Linting and checking validity of types ..Failed to compile. ./pages/_app.tsx:5:11 Type error: 'Component' cannot be used as a JSX component. Its element type 'Component<any, any, any> | ReactElement<any, any> | null' is not a valid JSX element. Type 'Component<any, any, any>' is not assignable to type 'Element | ElementClass | null'. Type 'Component<any, any, any>' is not assignable to type 'ElementClass'. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("/Users/sf/experiments/nextjs-testing-project/node_modules/.pnpm/@types+react@18.2.28/node_modules/@types/react/index").ReactNode'. Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'. Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'. 3 | 4 | export default function App({ Component, pageProps }: AppProps) { > 5 | return <Component {...pageProps} /> | ^ 6 | } 7 |  ELIFECYCLE  Command failed with exit code 1. Error: Command "pnpm run build" exited with 1
joulev
hmm does it work if you just run build then start locally?
this might be due to weird quirks of building and deploying on different os
try just vercel deploy without a local build step
American black bearOP
Thanks for your help with this
It does work OK if I pnpm build and then pnpm start locally
But running vercel deploy locally results in Error: No Next.js version could be detected in your project. Make sure"next"is installed in "dependencies" or "devDependencies" - I guess the link in the package.json is not working correctly
American black bearOP
Using a M1 Mac locally btw, in case that has impact on the potential OS issue you mentioned
Well
I would just use pnpm patch at this point
It is then version controllable and will definitely work well on vercel whether you deploy with git or the cli