@1amageek/reaf 中文文档教程

Question

With Firebase Hosting and Typescript example

How to use

Using create-next-app

执行 create-next-app 纱线 或 npx 引导示例：

npx create-next-app --example with-firebase-hosting-and-typescript with-firebase-hosting-and-typescript-app
# or
yarn create next-app --example with-firebase-hosting-and-typescript with-firebase-hosting-and-typescript-app

Download manually

下载示例：

curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-firebase-hosting-and-typescript
cd with-firebase-hosting-and-typescript

设置 firebase：

• install Firebase Tools: npm i -g firebase-tools
• create a project through the firebase web console
• grab the projects ID from the web consoles URL: https://console.firebase.google.com/project/
• update the .firebaserc default project ID to the newly created project
• login to the Firebase CLI tool with firebase login

Install project:

npm install

Run Next.js development:

npm run dev

Run Firebase locally for testing:

npm run serve

Deploy it to the cloud with Firebase:

npm run deploy

Clean dist folder

npm run clean

The idea behind the example

目标是使用 Firebase 托管重写规则在 Firebase Cloud Functions 上托管 Next.js 应用程序，以便从我们的 Firebase 托管 URL 提供我们的应用程序，用于 Next 应用程序和 Firebase 函数的完整 Typescript 堆栈。 每个单独的 page 包都在对执行初始服务器渲染的 Cloud Function 的新调用中提供。

这是基于@jthegedus 在with-firebase-hosting< /a> 例子。

如果您遇到问题，请随时在您在 next.js 存储库中创建的问题中标记@sampsonjoliver

Important

• The empty placeholder.html file is so Firebase Hosting does not error on an empty public/ folder and still hosts at the Firebase project URL.
• firebase.json outlines the catchall rewrite rule for our Cloud Function.
• The Firebase predeploy hooks defined in firebase.json will handle linting and compiling of the next app and the functions sourceswhen firebase deploy is invoked. The only scripts you should need are dev, clean and deploy.
• Specifying "engines": {"node": "8"} in the package.json is required for firebase functions to be deployed on Node 8 rather than Node 6 (Firebase Blog Announcement) . This is matched in by specifying target as es2017 in src/functions/tsconfig.json so that typescript output somewhat compacter and moderner code.