61f56f997c
Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Test examples / Test Examples (22) (push) Has been cancelled
Lock Threads / action (push) Has been cancelled
Trigger Release / start (push) Has been cancelled
Stale issue handler / stale (push) Has been cancelled
Update Font Data / create-pull-request (push) Has been cancelled
build-and-deploy / deploy-target (push) Has been cancelled
build-and-deploy / build (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
build-and-deploy / build-wasm (web) (push) Has been cancelled
build-and-deploy / Deploy preview tarball (push) Has been cancelled
build-and-deploy / Potentially publish release (push) Has been cancelled
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
build-and-deploy / Deploy examples (push) Has been cancelled
build-and-deploy / thank you, build (push) Has been cancelled
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Update React / create-pull-request (push) Has been cancelled
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
with Firebase Hosting example
The goal is to host the Next.js app on Firebase Cloud Functions with Firebase Hosting rewrite rules so our app is served from our Firebase Hosting URL. Each individual page bundle is served in a new call to the Cloud Function which performs the initial server render.
If you are having issues, feel free to tag @jthegedus in the issue you create on the next.js repo
Make sure that firebase is set up and you have the projectID
- Install Firebase Tools:
npm i -g firebase-tools - Create a project through the firebase web console
- Login to the Firebase CLI tool with
firebase login - Grab the projectID from
firebase projects:listor the web consoles URL:https://console.firebase.google.com/project/<projectID>
How to use
Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example with-firebase-hosting with-firebase-hosting-app
yarn create next-app --example with-firebase-hosting with-firebase-hosting-app
pnpm create next-app --example with-firebase-hosting with-firebase-hosting-app
Important: Update .firebaserc and add your firebase project ID.
To run Firebase locally for testing:
npm run serve
# or
yarn serve
To deploy it to the cloud with Firebase:
npm run deploy
# or
yarn deploy
TypeScript
To use TypeScript, simply follow TypeScript setup as normal (package.json scripts are already set).
i.e: npm install --save-dev typescript @types/react @types/node
Then you can create components and pages in .tsx or .ts
Only src/next.config.js and firebaseFunctions.js must remain in *.js format.
Good to know
firebase.jsonoutlines the catchall rewrite rule for our Cloud Function.- The empty
public/.gitignorefile is to ensurepublic/dir exists as it is required for Firebase Hosting. It is configured (by default) that dotfiles (public/.*) are ignored from being publicly served. - The Cloud Function is named
nextjsFunc(changeable in firebaseFunctions.js and firebase.json). public/*files are statically served through Firebase hosting, not through NextJs server.
Customization
Next App is in src/ directory.
The crucial files for the setup:
.firebasercfirebase.jsonfirebaseFunctions.jssrc/next.config.js- In
package.json:firebase-*packages,mainproperty defining the entry point asfirebaseFunctions.js