mirror of https://github.com/hanzoai/next.js.git synced 2026-09-24 17:00:51 +00:00

Files

T

Jam BalayaandGitHub 36dce2fe7e examples: add StackBlitz preview to README.md (#73546 )

### Description

Follow up #35349.

1. Update the [example
template](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
with [StackBlitz](https://stackblitz.com/) preview
2. Add `preview live with StackBlitz` to the examples
3. Remove the below old StackBlitz preview section from the examples

```md
## Preview

Preview the example live on [StackBlitz](http://stackblitz.com/):

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/active-class-name)
```

CC: @samcx 

### Improving Documentation

- [x] Run `pnpm prettier-fix` to fix formatting issues before opening
the PR.
- [x] Read the Docs Contribution Guide to ensure your contribution
follows the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

### Adding or Updating Examples

- [x] The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`.
See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

2025-01-14 05:24:51 +00:00

context

…

fetchData

…

firebase

…

pages

…

public

…

.env.local.example

…

.gitignore

…

package.json

…

README.md

…

vercel.json

…

README.md

Firebase Example

This is a simple set up for Firebase for client side applications.

The firebase app is initialized in firebase/clientApp.js, to use you just have to import it anywhere in the app

The React Context API is used to provide user state.

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-firebase with-firebase-app

yarn create next-app --example with-firebase with-firebase-app

pnpm create next-app --example with-firebase with-firebase-app

Configuration

Create a Firebase project and add a new app to it.
Create a .env.local file and copy the contents of .env.local.example into it:

cp .env.local.example .env.local

Set each variable on .env.local with your Firebase Configuration (found in "Project settings").
If you want to check the SSR page, get your account credentials from the Firebase console at Project settings > Service accounts, where you can click on Generate new private key and download the credentials as a json file. Then set FIREBASE_CLIENT_EMAIL and FIREBASE_PRIVATE_KEY in .env.local

Deploy on Vercel

You can deploy this app to the cloud with Vercel (Documentation).

Deploy Your Local Project

To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and import to Vercel.

Important: When you import your project on Vercel, make sure to click on Environment Variables and set them to match your .env.local file.