Reactでアプリを作成する際のメモ

npx create-react-app my-app

npx create-next-app@latest

data-google-analytics-opt-out=""

{
  "hosting": {
    "public": ".next",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "nextjs"
      }
    ]
  },
  "functions": {
    "source": "functions",
    "runtime": "nodejs18"
  }
}

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  output: 'export',// ←ここ
};

export default nextConfig;

npm run build

{
  "hosting": {
    "public": "out",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

firebase deploy --only hosting

npm install firebase

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "your_apiKey",
  authDomain: "your_authDomain",
  projectId: "your_projectId",
  storageBucket: "your_storageBucket",
  messagingSenderId: "your_messagingSenderId",
  appId: "your_appId",
  measurementId: "your_measurementId"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

firebase experiments:enable webframeworks

firebase init hosting

npm install firebase@10.14.1

? Detected an existing Next.js codebase in the current directory, should we use this? (Y/n) 

? In which region would you like to host server-side content, if applicable?
> us-central1 (Iowa)
  us-east1 (South Carolina)
  us-west1 (Oregon)
  asia-east1 (Taiwan)
  europe-west1 (Belgium)

// layout.tsxやpage.tsx内
import type { Metadata } from "next";
export const metadata: Metadata = {
  title: "タイトル",
  description: "説明,
  openGraph: {
    title: "タイトル",
    description: "説明",
    url: "https://yourdomain.com",
    images: [
      {
        url: "画像パス",
        width: 1200,
        height: 630,
        alt: "alt",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "タイトル",
    description: "説明",
    images: ["画像パス"],
  },
};

import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously } from 'firebase/auth';

// Firebase プロジェクトの設定
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_PROJECT.firebaseapp.com',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_PROJECT.appspot.com',
  messagingSenderId: 'YOUR_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

// Firebase アプリの初期化
const app = initializeApp(firebaseConfig);

// Firebase Authentication の初期化
const auth = getAuth(app);

// 匿名認証を行う関数
export const signInAnonymouslyToFirebase = async () => {
  try {
    await signInAnonymously(auth);
    console.log('匿名認証に成功しました');
  } catch (error) {
    console.error('匿名認証に失敗しました', error);
  }
};

service cloud.firestore {
  match /databases/{database}/documents {
    
    // fortune コレクションのルール
    match /myCollection/{documentId} {
      allow read, write: if request.auth != null;
    }
  }
}

import type { Metadata } from "next";

const URL_BASE = "https://bubblepopper.click";
export const metadata: Metadata = {
  title: "title",
  other: {
    "google-adsense-account": "AdSens登録時に表示されるmetadataのcontent部分",
  },
};

firebase init

then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert       
selection, and <enter> to proceed)

( ) Data Connect: Set up a Firebase Data Connect service
( ) Firestore: Configure security rules and indexes files for Firestore
( ) Genkit: Setup a new Genkit project with Firebase
( ) Functions: Configure a Cloud Functions directory and its files
( ) App Hosting: Configure an apphosting.yaml file for App Hosting
( ) Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
( ) Storage: Configure a security rules file for Cloud Storage
( ) Emulators: Set up local emulators for Firebase products
( ) Remote Config: Configure a template file for Remote Config
( ) Extensions: Set up an empty Extensions manifest
( ) Realtime Database: Configure a security rules file for Realtime Database and (optionally)       
provision default instance