Uploading next js functions

i don’t get it ? For example should i run netlify-cli build ?

If you have Netlify CLI installed globally (as I do) then you only need run netlify <command> <options>. You can run locally using netlify dev (which I assume you are doing based on your netlify.toml), then to deploy you would run netlify deploy --build.

Are you able to run locally using ntl dev?

Well,

I updated my netlify toml file :

[build]
  command = "next build packages/web"
  publish = "packages/web/.next"

[dev]
  command = "yarn start"
  port = 8888
  targetPort = 4321
  publish = "packages/web/out" 
  functions = "packages/web/out_functions" 
  autoLaunch = true
  framework = "next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

Then i run

netlify dev and ntl dev and it’s started a server on http://localhost:8888/register

But when i run netlify deploy --build,same thing happening; Netlify trying deploy functions forever.

My deploy log:

$ netlify deploy --build

────────────────────────────────────────────────────────────────
  Netlify Build
────────────────────────────────────────────────────────────────

> Version
  @netlify/build 17.9.2

> Flags
  {}

> Current directory
  D:\Main\programming\projects\airbnb

> Config file
  D:\Main\programming\projects\airbnb\netlify.toml

> Context
  production

> Loading plugins
   - @netlify/plugin-nextjs@3.8.0 from netlify.toml and package.json

────────────────────────────────────────────────────────────────
  1. onPreBuild command from @netlify/plugin-nextjs
────────────────────────────────────────────────────────────────

Using Next.js 11.0.1
info  - Loaded env from D:\Main\programming\projects\airbnb\packages\web\.env.production
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
Next.js cache restored.

(@netlify/plugin-nextjs onPreBuild completed in 7.1s)

────────────────────────────────────────────────────────────────
  2. build.command from netlify.toml
────────────────────────────────────────────────────────────────

$ next build packages/web
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
(node:9024) [DEP_WEBPACK_CHUNK_HAS_ENTRY_MODULE] DeprecationWarning: Chunk.hasEntryModule: Use new ChunkGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
info  - Creating an optimized production build  
warn  - Compiled with warnings

../../node_modules/next/dist/next-server/server/load-components.js
Critical dependency: the request of a dependency is an expression

../../node_modules/next/dist/next-server/server/load-components.js
Critical dependency: the request of a dependency is an expression

../../node_modules/next/dist/next-server/server/load-components.js
Critical dependency: the request of a dependency is an expression

../../node_modules/next/dist/next-server/server/require.js
Critical dependency: the request of a dependency is an expression

../../node_modules/next/dist/next-server/server/require.js
Critical dependency: the request of a dependency is an expression

../../node_modules/next/dist/next-server/server/require.js
Critical dependency: the request of a dependency is an expression

info  - Collecting page data
[    ] info  - Generating static pages (0/3)ServerRouter {
  route: '/[testId]',
  pathname: '/[testId]',
  query: {},
  asPath: '/[testId]',
  basePath: '',
  events: undefined,
  isFallback: false,
  locale: undefined,
  isReady: false,
  locales: undefined,
  defaultLocale: undefined,
  domainLocales: undefined,
  isPreview: false,
  isLocaleDomain: false
} router
info  - Generating static pages (3/3)
info  - Finalizing page optimization  

Page                              Size     First Load JS
┌ λ /                             1.48 kB         128 kB
├   /_app                         0 B            70.9 kB
├ ○ /[testId]                     347 B          71.2 kB
├ ○ /404                          1.36 kB        72.2 kB
├ λ /api/hello                    0 B            70.9 kB
└ λ /register                     34.6 kB         161 kB
+ First Load JS shared by all     70.9 kB
  ├ chunks/framework.e7644c.js    46.5 kB
  ├ chunks/main.848535.js         20.3 kB
  ├ chunks/pages/_app.483ead.js   2.49 kB
  ├ chunks/webpack.5b8c84.js      1.57 kB
  └ css/47b8a6c68cf6d88dd75a.css  307 kB

λ  (Lambda)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)


(build.command completed in 1m 4.2s)

────────────────────────────────────────────────────────────────
  3. onBuild command from @netlify/plugin-nextjs
────────────────────────────────────────────────────────────────

Detected Next.js site. Copying files...
** Running Next on Netlify package **
🚀 Next on Netlify 🚀
🌍️ Copying public folder to D:\Main\programming\projects\airbnb\packages\web\.next
💼 Copying static NextJS assets to D:\Main\programming\projects\airbnb\packages\web\.next
💫 Setting up API endpoints as Netlify Functions in D:\Main\programming\projects\airbnb\netlify\functions
💫 Setting up pages with getInitialProps as Netlify Functions in D:\Main\programming\projects\airbnb\netlify\functions
💫 Setting up pages with getServerSideProps as Netlify Functions in D:\Main\programming\projects\airbnb\netlify\functions
🔥 Copying pre-rendered pages with getStaticProps and JSON data to D:\Main\programming\projects\airbnb\packages\web\.next
💫 Setting up pages with getStaticProps and fallback: true as Netlify Functions in D:\Main\programming\projects\airbnb\netlify\functions
💫 Setting up pages with getStaticProps and revalidation interval as Netlify Functions in D:\Main\programming\projects\airbnb\netlify\functions
🔥 Copying pre-rendered pages without props to D:\Main\programming\projects\airbnb\packages\web\.next
Building 5 pages
🔀 Setting up redirects
🔀 Setting up headers
✅ Success! All done!

(@netlify/plugin-nextjs onBuild completed in 2.2s)

────────────────────────────────────────────────────────────────
  4. Functions bundling
────────────────────────────────────────────────────────────────

Packaging Functions from netlify\functions directory:
 - next_api_hello\next_api_hello.js
 - next_image\next_image.js
 - next_index\next_index.js
 - next_register\next_register.js


(Functions bundling completed in 1m 19.4s)

────────────────────────────────────────────────────────────────
  5. onPostBuild command from @netlify/plugin-nextjs
────────────────────────────────────────────────────────────────

Next.js cache saved.

(@netlify/plugin-nextjs onPostBuild completed in 820ms)

────────────────────────────────────────────────────────────────
  Summary
────────────────────────────────────────────────────────────────

> @netlify/plugin-nextjs: Essential Next.js Build Plugin ran successfully
  Generated serverless functions and stored the Next.js cache

────────────────────────────────────────────────────────────────
  Netlify Build Complete
────────────────────────────────────────────────────────────────

(Netlify Build completed in 2m 44.4s)
Deploy path:        D:\Main\programming\projects\airbnb\packages\web\.next
Functions path:     D:\Main\programming\projects\airbnb\netlify\functions
Configuration path: D:\Main\programming\projects\airbnb\netlify.toml
Deploying to draft URL...
✔ Deploying functions from cache (use --skip-functions-cache to override)
✔ Finished hashing 75 files and 4 functions
✔ CDN requesting 20 files and 4 functions
(23/26) Uploading next image ...

Capture

and it’s ending with the following error :

⠋ (25/26) Uploading next_register… » Warning: JSONHTTPError: 500
» Warning:
» {
» “name”: “JSONHTTPError”,
» “status”: 500,
» “json”: {
» “status”: 500,
» “error”: “Internal Server Error”
» }
» }
»
⠹ (25/26) Uploading next_register… JSONHTTPError: Internal Server Error

Every attempt to build your app has resulted in an

error Command failed with exit code 1.

and I never get to the uploading stage.

Not sure what else I can do to help.

can you share full log ?

Using the netlify.toml you last posted, when I run ntl deploy --build this is the result

────────────────────────────────────────────────────────────────
  Netlify Build
────────────────────────────────────────────────────────────────

❯ Version
  @netlify/build 17.9.2

❯ Flags
  {}

❯ Current directory
  /Users/coel/projects/airbnb-clone-staging

❯ Config file
  /Users/coel/projects/airbnb-clone-staging/netlify.toml

❯ Context
  production

❯ Loading plugins
   - @netlify/plugin-nextjs@3.8.0 from netlify.toml and package.json

────────────────────────────────────────────────────────────────
  1. onPreBuild command from @netlify/plugin-nextjs
────────────────────────────────────────────────────────────────

Using Next.js 11.0.1
info  - Loaded env from /Users/coel/projects/airbnb-clone-staging/packages/web/.env.production
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
The "target" config property must be one of "serverless", "experimental-serverless-trace". Building with "serverless" target.
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
No Next.js cache to restore.

(@netlify/plugin-nextjs onPreBuild completed in 735ms)

────────────────────────────────────────────────────────────────
  2. build.command from netlify.toml
────────────────────────────────────────────────────────────────

$ next build packages/web
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
Failed to compile.

./src/modules/register/RegisterConnector.tsx:1:36
Type error: Cannot find module '@abb/controller' or its corresponding type declarations.

> 1 | import { RegisterController } from "@abb/controller";
    |                                    ^
  2 | import React from "react";
  3 | import { useRegisterMutation } from "../../generated/graphql";
  4 | import RegisterView from "./views/RegisterView";
info  - Checking validity of types .
────────────────────────────────────────────────────────────────
  "build.command" failed
────────────────────────────────────────────────────────────────

  Error message
  Command failed with exit code 1: next build packages/web

  Error location
  In build.command from netlify.toml:
  next build packages/web

  Resolved config
  build:
    command: next build packages/web
    commandOrigin: config
    publish: /Users/coel/projects/airbnb-clone-staging/packages/web/.next
    publishOrigin: config
  plugins:
    - inputs: {}
      origin: config
      package: '@netlify/plugin-nextjs'

Oh,you have to build code:

Please run following commands,then try deploying
Btw i changed netlify.toml,please run git pull also

Preview deploy available https://610e68fb14cf62ea89b6b27c–goofy-hodgkin-051af1.netlify.app/register and the logs

Deploy path:        /home/coel/projects/airbnb-clone/packages/web/out
Functions path:     /home/coel/projects/airbnb-clone/packages/web/out_functions
Configuration path: /home/coel/projects/airbnb-clone/netlify.toml
Deploying to draft URL...
✔ Deploying functions from cache (use --skip-functions-cache to override)
✔ Finished hashing 22 files and 4 functions
✔ CDN requesting 2 files and 4 functions
✔ Finished uploading 6 assets
✔ Deploy is live!

Logs:              https://app.netlify.com/sites/goofy-hodgkin-051af1/deploys/610e68fb14cf62ea89b6b27c
Website Draft URL: https://610e68fb14cf62ea89b6b27c--goofy-hodgkin-051af1.netlify.app

If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.
netlify deploy --build --prod

Yeah,it’s working on your pc.

Are you using latest code ?

My problem is i can’t upload functions,netlify giving me 500 Internal server error

I ran the following

$ git clone https://github.com/alisalim17/airbnb-clone
$ yarn install
$ npm run build
$ ntl deploy --build

It deployed without issue. However the following error are logged in DevTools when attempting to register

airbnb-clone-errors

Have you tried removing .next, out, out_functions and .netlify directories before building?

Yeah,it’s normal i didn’t deployed my backend

I am trying now,

I will remove those folders and run netlify deploy --build.Is it right ?

Btw my netlify-cli version:
ntl -v
netlify-cli/6.0.8 win32-x64 node-v14.17.1


What is yours ?

Just updated to the latest (though I don’t believe that should matter.)

I tried what you said,removed .next, out, out_functions and .netlify.

Then i run netlify init,i created project and netlify starting build code,then it started deploying it.

At the end it’s giving me this error :

⠦ (5/6) Uploading next_register… » Warning: JSONHTTPError: 500
» Warning:
» {
» “name”: “JSONHTTPError”,
» “status”: 500,
» “json”: {
» “status”: 500,
» “error”: “Internal Server Error”
» }
» }
»


What you think ? When netlify giving that error ??

Perhaps your bundled function (`.netlify/functions/next_register.zip) is too big as per 500 Internal Server Error on "CDN Diffing Files" - #23 by luke

1 Like

My functions dir is different(packages/web/out_functions).‘out_functions’ size is about 9 mb.I think that’s not big at all.

Netlify also creates another functions as you said(.netlify/functions) and that folder’s size is 50 mb.

How can i reduce size of out_functions ?

Finally,i solve the issue using by github actions.

I think the problem with my pc.

Thanks for your help.

I really appreciate it :slight_smile: