## What? Update examples `.gitignore` files for parity with [Yarn's official recommendations](https://v3.yarnpkg.com/getting-started/qa#which-files-should-be-gitignored), accounting for Yarn's modern Plug-n-Play functionality. ## Why? New projects initialized with `create-next-app` presently add various extraneous files from the Yarn cache to the initial commit. This is most notable in the case of the Next SWC binary, which may exceed 100M in some environments (empirically, 64-bit Darwin and WSL2 Ubuntu, and very probably other unix/linux environments), and prevent users from pushing their new projects to free GitHub repositories without rewriting the commit history to exclude the extraneous files, or unnecessarily setting up Git LFS to include them. ## How? I have errored on the side of exclusion to enable users to push their CNA projects to GitHub as-is and for parity with other package managers, while still providing the opportunity to opt in to additional functionality provided by modern Yarn. These changes follow the recommendations for **non**-[Zero-Install](https://yarnpkg.com/features/caching#zero-installs) configurations, as Zero-Install functionality is an extension on top of the base package manager experience, and may necessitate additional configuration and present additional complications for unsuspecting users, so I think it's best left up to the user to opt-in. On account of the majority of publicly available Next.js-based projects comprising general consumer-facing websites, it is my belief that the majority of Next projects would not benefit from Yarn's Zero-Install functionality, and that explicitly facilitating it by default would break status quo with all other non-Yarn CNA projects. Contrary to the example `.gitignore`s provided by Yarn, I've excluded the `.yarn/sdks` directory as it contains IDE-specific tooling; I feel it would be presumptuous for an environmentally-agnostic tool to target and provide package-manager-specific tooling for specific editors. This too should be left to the user to opt-in to and provide for their project if they deem necessary. I have retained the current `.gitignore`'s exclusion of the `/.pnp` directory for backwards compatibility with older versions of Yarn (the files therein have since been reallocated to the `.yarn` directory addressed by these changes, but I am not clear on when that delineation occurred or the prevalence of Yarn installations which depend on the former convention). Maintaining the exclusion here, in the worst case, implies additional downloads (on an order of magnitude merely similar to using npm from the outset) rather than failure. CC: @samcx ### 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 Co-authored-by: Sam Ko <sam@vercel.com>
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