{"id":18716024,"url":"https://github.com/alexgenovese/nextjs-firebase","last_synced_at":"2025-04-12T13:20:35.247Z","repository":{"id":38781764,"uuid":"249753987","full_name":"alexgenovese/nextjs-firebase","owner":"alexgenovese","description":"Cloud Functions and Next.js can combine to provide a low-cost auto-scaling, SSR app experience.","archived":false,"fork":false,"pushed_at":"2023-01-05T17:04:46.000Z","size":3591,"stargazers_count":3,"open_issues_count":18,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-23T00:09:55.936Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexgenovese.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-24T16:04:24.000Z","updated_at":"2023-10-30T11:36:58.000Z","dependencies_parsed_at":"2023-02-04T08:15:39.661Z","dependency_job_id":null,"html_url":"https://github.com/alexgenovese/nextjs-firebase","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexgenovese%2Fnextjs-firebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexgenovese%2Fnextjs-firebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexgenovese%2Fnextjs-firebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexgenovese%2Fnextjs-firebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexgenovese","download_url":"https://codeload.github.com/alexgenovese/nextjs-firebase/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223518521,"owners_count":17158689,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T13:11:19.137Z","updated_at":"2024-11-07T13:11:19.829Z","avatar_url":"https://github.com/alexgenovese.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cdiv align=\"center\"\u003e\n\n# Nextjs \u0026 Firebase Starter\n\n[Next.js][nextjs] SSR React on Firebase Hosting with Cloud Functions\n\n\u003c/div\u003e\n\nCloud Functions and Next.js can combine to provide a low-cost auto-scaling, SSR app experience.\n\nFirebase Hosting can [rewrite routes to a Cloud Function][function-rewrites] that serves our server-side rendered Next.js React app. Each individual `page` bundle is served in a new call to the Cloud Function which performs the initial server render. \n\nThis results in our app being served on our Hosting URL instead of the Cloud Function URL:\n\n`\u003cproject-name\u003e.firebaseapp.com/` \u0026 `\u003cproject-name\u003e.web.app/`\n\ninstead of:\n\n`https://us-central1-\u003cproject-name\u003e.cloudfunctions.net/\u003cfunction-name\u003e`\n\n## Usage\n\n```shell\n# install\nyarn install\n# setup: setup firebase config to deploy\nyarn setup\n# watch\nyarn watch\n# build\nyarn build\n# locally test\nyarn serve\n# deploy to firebase\nyarn deploy\n```\n\n- the `src/` and `dist/` folder are deployed alongside one another\n- no need to randomly copy files between places\n- `yarn serve` works out of the box\n\n[function-rewrites]: https://firebase.google.com/docs/hosting/full-config#section-rewrites\n[fb-route-priority]: https://firebase.google.com/docs/hosting/full-config#hosting_priority_order\n[medium-nextjs]: https://medium.com/@jthegedus/table-of-contents-ec337953b39b\n[nextjs]: https://nextjs.org/\n\n\n## Set up firebase\n\n- install Firebase Tools: `npm i -g firebase-tools`\n- create a project through the [firebase web console](https://console.firebase.google.com/)\n- grab the projects ID from the web consoles URL: `https://console.firebase.google.com/project/\u003cprojectId\u003e`\n- update the `.firebaserc` default project ID to the newly created project\n- login to the Firebase CLI tool with `firebase login`\n\n### Customization\n\nNext App and Next Server development are separated into two different folders:\n\n- app - `src/client/`\n- server - `src/server/`\n\nIf you wish to modify any configuration of the Next App, you should only modify the contents of `src/app`.\n\nFor instance, the `.babelrc` in `src/server` is used only to compile the Firebase Cloud Functions code, which is our the Next Server code. If you wish to customize the `.babelrc` for the Next App compilation, then you should create one at `src/app/.babelrc` and follow the [customization guide](https://github.com/zeit/next.js#customizing-babel-config).\n\n## Important\n\n- The empty `placeholder.html` file is so Firebase Hosting does not error on an empty `public/` folder and still hosts at the Firebase project URL.\n- `firebase.json` outlines the catchall rewrite rule for our Cloud Function.\n- Specifying [`\"engines\": {\"node\": \"8\"}`](package.json#L5-L7) in the `package.json` is required for firebase functions\n  to be deployed on Node 8 rather than Node 6\n  ([Firebase Blog Announcement](https://firebase.googleblog.com/2018/08/cloud-functions-for-firebase-config-node-8-timeout-memory-region.html))\n  . This is matched in [`src/functions/.babelrc`](src/functions/.babelrc) so that babel output somewhat compacter and moderner code.\n\n### \\_app.js\n\nIf using `_app.js` you may receive the following error on your deployed Cloud Function:\n\n```\n{ Error: Cannot find module '@babel/runtime/regenerator'...\n```\n\nDespite next.js having `@babel/runtime` as a dependency, you must install it as a dependency directly in this project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexgenovese%2Fnextjs-firebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexgenovese%2Fnextjs-firebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexgenovese%2Fnextjs-firebase/lists"}