{"id":13433859,"url":"https://github.com/tomsoderlund/nextjs-pwa-firebase-boilerplate","last_synced_at":"2026-01-31T17:54:15.938Z","repository":{"id":38770197,"uuid":"276342977","full_name":"tomsoderlund/nextjs-pwa-firebase-boilerplate","owner":"tomsoderlund","description":"Next.js serverless PWA with Firebase boilerplate","archived":false,"fork":false,"pushed_at":"2024-12-12T13:23:28.000Z","size":1313,"stargazers_count":224,"open_issues_count":7,"forks_count":24,"subscribers_count":8,"default_branch":"main","last_synced_at":"2024-12-12T14:26:10.358Z","etag":null,"topics":["firebase","firestore","nextjs","pwa","react","react-hooks","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://nextjs-pwa-firebase-boilerplate.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomsoderlund.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-01T10:05:21.000Z","updated_at":"2024-12-12T13:23:37.000Z","dependencies_parsed_at":"2024-11-10T13:18:29.167Z","dependency_job_id":"039b1c47-9673-4b03-a983-5a4a4ade9843","html_url":"https://github.com/tomsoderlund/nextjs-pwa-firebase-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomsoderlund%2Fnextjs-pwa-firebase-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomsoderlund%2Fnextjs-pwa-firebase-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomsoderlund%2Fnextjs-pwa-firebase-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomsoderlund%2Fnextjs-pwa-firebase-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomsoderlund","download_url":"https://codeload.github.com/tomsoderlund/nextjs-pwa-firebase-boilerplate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244041426,"owners_count":20388236,"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":["firebase","firestore","nextjs","pwa","react","react-hooks","reactjs","typescript"],"created_at":"2024-07-31T02:01:38.312Z","updated_at":"2026-01-31T17:54:15.931Z","avatar_url":"https://github.com/tomsoderlund.png","language":"TypeScript","funding_links":["https://ko-fi.com/tomsoderlund"],"categories":["TypeScript"],"sub_categories":[],"readme":"![App icon](public/favicon.png)\n\n# Next.js Firebase PWA\n\n**Next.js serverless PWA with Firebase and React Hooks**\n\n![nextjs-pwa-firebase-boilerplate demo on phone](public/share_preview.jpg)\n\n_Note 1: This boilerplate is being converted to TypeScript. For pure JavaScript, see branch `old-javascript`_\n\n_Note 2: this is my v4 boilerplate for React web apps. See also my [GraphQL + Postgres SQL boilerplate](https://github.com/tomsoderlund/nextjs-pwa-graphql-sql-boilerplate), [Redux + REST + Postgres SQL boilerplate](https://github.com/tomsoderlund/nextjs-sql-rest-api-boilerplate) and [Redux + REST + MongoDB boilerplate](https://github.com/tomsoderlund/nextjs-express-mongoose-crudify-boilerplate). For a simple Next.js landing page, see [nextjs-generic-landing-page](https://github.com/tomsoderlund/nextjs-generic-landing-page)._\n\n## Support this project\n\nDid you or your company find `nextjs-pwa-firebase-boilerplate` useful? Please consider giving a small donation, it helps me spend more time on open-source projects:\n\n[![Support Tom on Ko-Fi.com](https://www.tomsoderlund.com/ko-fi_tomsoderlund_50.png)](https://ko-fi.com/tomsoderlund)\n\n## Why is this awesome?\n\nThis is a great template for a any project where you want **React (with Hooks)** (with **static site generation (SSG)** or **server-side rendering (SSR)**, powered by [Next.js](https://github.com/zeit/next.js)) as frontend and **Firebase** as backend. *Lightning fast, all JavaScript.*\n\n- Great starting point for a [PWA (Progressive Web App)](https://en.wikipedia.org/wiki/Progressive_web_applications), which you can add to your Home Screen and use as a full-screen app.\n- PWA features such as `manifest.json` and offline support (`next-offline`).\n- Can be deployed as [serverless functions on Vercel/Zeit Now](#deploying).\n- Uses the new Firebase [Firestore](https://firebase.google.com/docs/firestore) database, but easy to replace/remove database.\n- Login/Signup with Firebase Authentication.\n- Can use SSG `getStaticProps` or SSR `getServerSideProps`.\n- React Hooks and Context for state management and business logic.\n- Free-form database model. No GraphQL or REST API, just add React Hooks and modify `getStaticProps`/`getServerSideProps` when changing/adding database tables.\n- Easy to style the visual theme using CSS (e.g. using [Design Profile Generator](https://tomsoderlund.github.io/design-profile-generator/)).\n- SEO support with `sitemap.xml` and `robots.txt`.\n- Google Analytics and `google-site-verification` support (see `config/config.ts`).\n- Flexible configuration with `config/config.ts` and `.env.local` file.\n- Code linting and formatting with StandardJS (`yarn lint`/`yarn fix`).\n- Unit testing with Jasmine (`yarn unit`, not yet included).\n- Great page speed, see [Lighthouse](https://developers.google.com/web/tools/lighthouse) score:\n\n![Lighthouse score](docs/lighthouse_score.png)\n\n## Demo\n\nSee [**nextjs-pwa-firebase-boilerplate** running on Vercel here](https://nextjs-pwa-firebase-boilerplate.vercel.app/).\n\n![nextjs-pwa-firebase-boilerplate demo on phone](docs/demo.jpg)\n\n## How to use\n\nClone this repository:\n\n    git clone https://github.com/tomsoderlund/nextjs-pwa-firebase-boilerplate.git [MY_APP]\n    cd [MY_APP]\n\nRemove the `.git` folder since you want to create a new repository\n\n    rm -rf .git\n\nInstall dependencies:\n\n    yarn  # or npm install\n\nAt this point, you need to [set up Firebase Firestore, see below](#set-up-firebase-database-firestore).\n\nWhen Firebase is set up, start the web app by:\n\n    yarn dev\n\nIn production:\n\n    yarn build\n    yarn start\n\nIf you navigate to `http://localhost:3004/` you will see a web page with a list of articles (or an empty list if you haven’t added one).\n\n## Modifying the app to your needs\n\n### Change app name and description\n\n- Do search/replace for the `name`’s “Next.js Firebase PWA”, “nextjs-pwa-firebase-boilerplate” and `description` “Next.js serverless PWA with Firebase and React Hooks” to something else.\n- Change the `version` in `package.json` to `0.1.0` or similar.\n- Change the `license` in `package.json` to whatever suits your project.\n\n### Renaming “Article” to something else\n\nThe main database item is called `Article`, but you probably want something else in your app.\n\nRename the files:\n\n    git mv hooks/useArticles.tsx hooks/use{NewName}s.tsx\n\n    mkdir -p components/{newName}s\n    git mv components/articles/CreateArticleForm.tsx components/{newName}s/Create{NewName}Form.tsx\n    git mv components/articles/ArticleDetails.tsx components/{newName}s/{NewName}Details.tsx\n    git mv components/articles/ArticleList.tsx components/{newName}s/{NewName}List.tsx\n    git mv components/articles/ArticleListItem.tsx components/{newName}s/{NewName}ListItem.tsx\n    rm -r components/articles\n\n    mkdir pages/{newName}s\n    git mv \"pages/articles/[slug].tsx\" \"pages/{newName}s/[slug].tsx\"\n    rm -r pages/articles\n\nThen, do search/replace inside the files for different casing: `article`, `Article`, `ARTICLE`.\n\n### Change port number\n\nDo search/replace for `3004` to something else.\n\n### Set up Firebase database (Firestore)\n\nSet up the database (if you don’t need a database, see “How to remove/replace Firebase as database” below):\n\n1. Go to https://console.firebase.google.com/ and create a new project, a new web app, and a new Cloud Firestore database.\n2. Copy the `firebaseConfig` (from when setting up the Firebase web app) to `lib/data/firebase.ts`\n3. Edit the `.env.local` file, setting the `NEXT_PUBLIC_FIREBASE_API_KEY` value.\n\n### How to remove the Firebase dependency\n\n- Run `yarn remove firebase`\n- Delete `lib/data/firebase.ts` and modify `hooks/useArticles.tsx`.\n\n### Replace Firebase with Postgres SQL\n\n- Use a Postgres hosting provider (e.g. https://www.elephantsql.com/)\n- Use [`createSqlRestRoutesServerless` in `sql-wizard`](https://github.com/tomsoderlund/sql-wizard#creating-rest-routes-serverless-eg-for-nextjs-and-vercel) to set up your own API routes.\n\n### Replace Firebase with Supabase (Postgres SQL, real-time updates)\n\n- Remove Firebase: `yarn remove firebase`\n- Add Supabase: `yarn add @supabase/supabase-js`\n- Add `NEXT_PUBLIC_SUPABASE_API_KEY` to `.env.local`\n- Create a `lib/data/supabase.ts`:\n```\nimport { createClient } from '@supabase/supabase-js'\nconst supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL\nconst supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_API_KEY\nexport const supabase = createClient(supabaseUrl, supabaseKey)\n```\n- Update the JS files that reference `lib/data/firebase`\n\n### Change visual theme (CSS)\n\n1. Change included CSS files in `pages/_app.tsx`\n2. Change CSS in `public/app.css`\n3. Change font(s) in `PageHead.tsx`\n4. Change colors in `public/manifest.json`\n\n### Login/Signup with Firebase Authentication\n\nYou need to enable Email/Password authentication in https://console.firebase.google.com/project/YOURAPP/authentication/providers\n\n## Deploying on Vercel\n\n\u003e Note: If you set up your project using the Deploy button, you need to clone your own repo instead of this repository.\n\nSetup and deploy your own project using this template with [Vercel](https://vercel.com). All you’ll need is your Firebase Public API Key.\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Ftomsoderlund%2Fnextjs-pwa-firebase-boilerplate\u0026env=NEXT_PUBLIC_FIREBASE_API_KEY\u0026envDescription=Enter%20your%20public%20Firebase%20API%20Key\u0026envLink=https://github.com/tomsoderlund/nextjs-pwa-firebase-boilerplate#deploying-with-vercel)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomsoderlund%2Fnextjs-pwa-firebase-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomsoderlund%2Fnextjs-pwa-firebase-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomsoderlund%2Fnextjs-pwa-firebase-boilerplate/lists"}