Files
マルコメ f54d597563 examples: update gitignore files for parity for yarn recommendations (#71956)
## 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>
2024-12-17 01:24:53 +00:00
..

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:list or 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.json outlines the catchall rewrite rule for our Cloud Function.
  • The empty public/.gitignore file is to ensure public/ 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:

  • .firebaserc
  • firebase.json
  • firebaseFunctions.js
  • src/next.config.js
  • In package.json: firebase-* packages, main property defining the entry point as firebaseFunctions.js

References