Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mars/heroku-nextjs
⏩ Deploy Next.js universal web apps to Heroku
https://github.com/mars/heroku-nextjs
heroku nextjs react universal-app
Last synced: 6 days ago
JSON representation
⏩ Deploy Next.js universal web apps to Heroku
- Host: GitHub
- URL: https://github.com/mars/heroku-nextjs
- Owner: mars
- License: mit
- Created: 2016-10-29T19:31:03.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-10-25T08:05:58.000Z (about 1 year ago)
- Last Synced: 2024-12-29T16:29:51.492Z (13 days ago)
- Topics: heroku, nextjs, react, universal-app
- Language: HTML
- Homepage: https://nextjs.herokuapp.com
- Size: 111 KB
- Stars: 370
- Watchers: 8
- Forks: 37
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [Next.js](https://nextjs.org/) on Heroku
Deploy [React](https://facebook.github.io/react/)-based universal web apps on [Heroku](https://www.heroku.com/home).
**Demo deployment** from this repo:
https://nextjs.herokuapp.com**A custom Node/Express server** is supported. Use it to:
* combine a Node API with a Next/React UI
* implement custom URL routes▶️ **[Next with custom Express server](https://github.com/mars/heroku-nextjs-custom-server-express)**
## Requires
* Heroku
* [command-line tools (CLI)](https://devcenter.heroku.com/articles/heroku-command-line)
* [a free account](https://signup.heroku.com)
* [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
* [Node.js](https://nodejs.org)
* [Next.js](https://github.com/zeit/next.js)## Production deployment
Once you have a [Next app working locally](https://nextjs.org/docs/#setup), you may deploy it for public access.
1. Revise the `npm start` script to set the [web listener `$PORT`](https://devcenter.heroku.com/articles/dynos#local-environment-variables):
Merge this entry into **package.json**:
```json
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start -p $PORT"
}
}
```⭐️ *In March 2019, [Heroku began running `npm run build` automatically](https://devcenter.heroku.com/changelog-items/1573), so the old `heroku-postbuild` script entry is no longer required.*
1. Ensure the app is a git repo, ignoring local-only directories:
```bash
git init
(echo node_modules/ && echo .next/) >> .gitignore
```
1. Create the Heroku app:```bash
heroku create $APP_NAME
```
1. 🚀 Deploy:```bash
git add .
git commit -m 'Next.js app on Heroku'
git push heroku main
```
⭐️ *As of July 2020, [Heroku supports `git push heroku main`](https://devcenter.heroku.com/changelog-items/1829) and encourages its use. The support for the branch name of 'master' will remain available for backwards compatibility.*1. ♻️ Deploy changes: add, commit, & push again.
## Custom Config
Next itself supports build & runtime configuration through the [next.config.js](https://nextjs.org/docs/#exposing-configuration-to-the-server--client-side) file.
Use environment variables ([Heroku config vars](https://devcenter.heroku.com/articles/config-vars)) within your React components, no rebuilds required! Simply set [next.config.js](https://nextjs.org/docs/#exposing-configuration-to-the-server--client-side) values from the server's environment using `process.env` object.