WebPage to output YouTube channel name list belong to nijisanji
create-next-app
Execute create-next-app
with Yarn or npx to bootstrap the example:
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 the example:
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
Set up firebase:
npm i -g firebase-tools
.firebaserc
default project ID to the newly created projectfirebase login
npm install
npm run dev
npm run serve
npm run deploy
npm run clean
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, with a complete Typescript stack for both the Next app and for the Firebase Functions. Each individual page
bundle is served in a new call to the Cloud Function which performs the initial server render.
This is based off of the work of @jthegedus in the with-firebase-hosting example.
If you're having issues, feel free to tag @sampsonjoliver in the issue you create on the next.js repo
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.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
."engines": {"node": "8"}
in the package.json
is required for firebase functionses2017
in src/functions/tsconfig.json
so that typescript output somewhat compacter and moderner code.