Next js: Easily deploy to Zeit vercel

[asherccohen]

• [X ] I am running the latest version
• [X ] I checked the documentation (nx.dev) and found no answer
• [ X] I checked to make sure that this issue has not already been filed
• [ X] I'm reporting the issue to the correct repository (not related to React, Angular or any dependency)

Expected Behavior

Deploy to Zeit Vercel with a simple command.

Current Behavior

Current 'build' structure works for platforms like Heroku but not on Zeit Vercel, as we can't push the .next folder. Like this we miss all the cool features this hosting platform gives like static hosting to CDN!

Failure Information (for bugs)

Zeit Vercel is very strict on how to deploy a next js project since it needs to accomodate for many factors (paths/api routes/deps/env variables etcs), therefore prefers building on their hosting provider. It also ignores .next folders (there's a trick to push this by using a .vercelignore file, but doesn't help anyway)

The current implementation of next js plugin for nx dev is great, it can easily create a .next folder and copy assets to dist/myApp, it also generates a basic package.json (to which we have to manually add deps).

This structure is ready for platforms like Heroku, where we can push over the .next folder (build artifacts which include shared libs and typescript related compilation), have heroku install node_modules then run the project.

The only solution I have found is to avoid building altogether. What I do:

• move all the folders of my app to dist/myNextJSApp excluding the local tsconfig.json file
• move the nx root tsconfig.json file to dist/myNextJSApp
• manually add all the dependencies to dist/myNextJSApp/package.json including @types
• create a .now folder to automate deployment to Vercel as their command line requires to link to an existing project on their platform. To get the right settings you can run now/vercel manually once and save that folder in your original app folder. You can then copy this over like you do with the other folders.
• deploy to Zeit Vercel

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. generate a next app
2. add some dependencies (like date-fns or some other library) and use it in the app.
3. import and use a shared lib
4. nx build myNextJSApp
5. Try to deploy to Zeit Vercel (REMEMBER that .next folder will not be pushed to Vercel)

[Rafcin]

For vercel you can just set the build script to be nx build appname --prod and it will work just fine.

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.