Next.js + Tailwind + Firebase + デザインのメモ帳

// このchildrenは暗黙で<Hoge></Hoge>の中の要素
export function Hoge({children}) {
  return (
    <div>
      {children}
    </div>
  )
}

export default function Fuga() {
  return (
    <>
      <Hoge>
        <div>this is child</div>
      </Hoge>
      <div>another div</div>
    </>
  )
}

const hoge = 3;
export { hoge };

import { hoge } from "hogehoge.js"

const hoge = 3;
export default hoge;

import hoge from "hogehoge.js"

import { useState, useEffect } from "react";
import FirebaseApp from "../myFirebase";
import { getFirestore, collection, getDocs } from "firebase/firestore/lite";

export function comment(props) {
    return (
        <div>
            {
                ["content", "age", "time"].map(k => (
                    <div>
                        {props[k]}
                    </div>
                ))
            }
        </div>
    );
}

export async function fetchFromFirestore() {
    const db = getFirestore(FirebaseApp);
    const col = collection(db, "commentV1");
    const docs = await getDocs(col);
    let arr = [];
    docs.forEach((d) => {
        arr.push(d.data());
    });
    return arr;
}

export default function Hoge() {
    const [data, setData] = useState([]);

    useEffect(() => {
       fetchFromFirestore().then(a => {
            setData(a);
        });
    }, []);

    return (
        <>
            <div>{
                data.map(a => comment(a))
            }</div>
        </>
    );
}

import { useState } from "react";

export default function Home({ currStamp, nextStamp }) {
  const [currTime, setCurrTime] = useState("");
  setInterval(() => {
    setCurrTime((new Date()).toString());
  }, 100);
  return (
    <>
    <div>ISR test <br/>now {currTime} <br/> last: {currStamp} <br/> next: {nextStamp}</div>
    <p>
      You can see:
      <br/> - now is current time set by your browser
      <br/> - last is the time this page was rendered in SERVER (that&apos;s why &apos;Coordinated Universal Time&apos;)
      <br/> - Keep refreshing. &apos;last&apos; changes every 10 seconds, meaning the cache is updated every 10 seconds.
      <br/> ✌️     
    </p>
    </>
  )
}

export async function getStaticProps() {
  const currStamp = (new Date()).toString();
  const nextStamp = "10秒後";
  return {
    props: {
      currStamp,
      nextStamp
    },
    revalidate: 10,
  }
}

export async function getStaticPaths() {
    const paths = [ { params: { id: 'nyc-is-down' } }, { params: { id: 'london-is-back' } } ];
    return {
        paths,
        fallback: false
    }
}

export async function getStaticProps({ params }) {
    console.log(params);
    const pageData = {"title": "NYC is Down"};
    return {
        props: {
            pageData
        },
        revalidate: 5
    }
}

export default function Page({ pageData }) {
    return <div>{ pageData.title }</div>
}

 {
  params: {
    username: "Kenshiro",
    album: "2022 Summer",
    photo: "smiling_dog"
  }
}

{{ params: {username: "Kenshiro", album: "2022 Summer", photo: "smiling_dog", dummy: "can you see this"}}}

export async function getStaticProps({ params }) {
    const pageData = {title: "NYC is Good", content: "NYC is good because..."};
    return {
        props: {
            pageData
        }
    }
}

// ここで{ props }としてもconsole.log(props)はundefined。暗黙的にpropsの中身の変数の名前を見ている。どこで決まる？
export default function Page({ pageData }) {
    return <div>{ pageData.title }</div>
}

# npxはnpm executerでパッケージ実行コマンド。--use-npmをしないとyarnがデフォルトで実行される
npx create-next-app my-blog --use-npm 
cd my-blog

npm run dev

npm install firebase

import { initializeApp } from 'firebase/app'
import { getFirestore, collection, doc, where, query, setDoc, getDoc, getDocs } from "firebase/firestore";

const app = initializeApp({
    apiKey: ************************,
    authDomain: ************************,
    databaseURL: ************************,
    projectId: ************************,
    storageBucket: ************************,
    messagingSenderId: ************************,
    appId: ************************,
    measurementId: ************************
});

// https://firebase.google.com/docs/firestore/query-data/get-data

function getData1() {
  const db = getFirestore(app);
  const cl = collection(db, "comments");
  const rf = doc(db, "comments", "hoge");
  // rf -> cl  to get ALL docs
  getDoc(rf).then(doc => {
    console.log(doc.data());
  });
}

function getData2() {
  const db = getFirestore(app);
  const cl = collection(db, "comments");
  const qu = query(cl, where("city", "==", "東京"));
  getDocs(qu).then(docs => {
    docs.forEach(doc => {
      console.log(doc.data());
    });
  });
}

// https://firebase.google.com/docs/firestore/manage-data/add-data#web-version-9
function setData() {
  const db = getFirestore(app);
  const rf = doc(db, "comments", "yoyo");
  const data = {
    name: "Kenta",
    city: "Tokyo"
  };
  setDoc(rf, data).then(e => {
    console.log("Set data OK!");
  });
}

export default function Home() {
  // getData1();
  // getData2();
  setData();
  return (
    <div>firebase</div>
  )
}

export default function Home() {
  const [val, setVal] = useState("");

  function getData(did) {
    const db = getFirestore(app);
    const rf = doc(db, "tweetsv1", did);
    getDoc(rf).then(e => {
      setVal(e.data().name);
    });
  }

  function setData(did, data) {
    const db = getFirestore(app);
    const rf = doc(db, "tweetsv1", did);
    setDoc(rf, data).then(e => {
      console.log("Set data OK!");
    });
  }  
  
  function hc(e) {
    e.preventDefault();
    setVal(e.target.value);
  }

  function oc(e) {
    setData("hoge", {name: val});
  }

  useEffect = () => getData("hoge");

  return  (
    <>
      <input id="name" value={ val } onChange={ hc }></input>
      <button onClick={ oc }>update</button>
    </>
  )
}

useEffect(() => {doFirebase}, [])

npm install @auth0/nextjs-auth0

# A long, secret value used to encrypt the session cookie
AUTH0_SECRET='LONG_RANDOM_VALUE'
# The base url of your application
AUTH0_BASE_URL='http://localhost:3000'
# The url of your Auth0 tenant domain
AUTH0_ISSUER_BASE_URL='https://YOUR_AUTH0_DOMAIN.auth0.com'
# Your Auth0 application's Client ID
AUTH0_CLIENT_ID='YOUR_AUTH0_CLIENT_ID'
# Your Auth0 application's Client Secret
AUTH0_CLIENT_SECRET='YOUR_AUTH0_CLIENT_SECRET'

node -e "console.log(crypto.randomBytes(32).toString('hex'))"

mkdir pages/api/auth
touch pages/api/auth/\[...auth0\].js

import { handleAuth } from '@auth0/nextjs-auth0';
export default handleAuth();

import React from 'react';
import { UserProvider } from '@auth0/nextjs-auth0';

export default function App({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}

import { useUser } from '@auth0/nextjs-auth0';

export default function Index() {
  const { user, error, isLoading } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;

  if (user) {
    return (
      <div>
        Welcome {user.name}! <a href="/api/auth/logout">Logout</a>
      </div>
    );
  }

  return <a href="/api/auth/login">Login</a>;
}

import { useUser } from '@auth0/nextjs-auth0';
import Link from "next/link";

export default function Index() {
  const { user, error, isLoading } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;

  if (user) {
    return (
      <div>
        Welcome {user.name}! <Link href="/api/auth/logout">Logout</Link>
      </div>
    );
  }

  return <Link href="/api/auth/login">Login</Link>;
}

touch .env.production

AUTH0_BASE_URL=$VERCEL_URL

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: ["lh3.googleusercontent.com"]
  }
}

module.exports = nextConfig

import Image from "next/Image"
<Image src="https://lh3.googleusercontent.com/483209" width="50" height="50">

            <div className="rounded-full blue relative w-24 h-24">
              <Image layout="fill" objectFit="contain" src="https://res.cloudinary.com/dhw3ap07h/image/upload/v1659000139/face2_ekc0pn.webp" width="100%" height="100%"></Image>
            </div>

import { useState } from "react";

export default function Home() {
  const [rst, setRst] = useState("Choose files");

  function handle(e) {
    const files = e.target.files;
    const url = "https://api.cloudinary.com/v1_1/<CLOUD_NAME>/auto/upload";
    const data = new FormData();

    for (let i = 0; i < files.length; i++) {
      // data.append("file", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
      data.append("file", files[i]);
      data.append("upload_preset", <UPLOAD_PRESET>);
      fetch(url, {method: "POST", body: data}).then(e => {
        return e.text();
      }).then(e => {
        setRst(e);
      });
    }
  }

  return (
    <>
      <div>{rst}</div>
      <input onChange={handle} type="file" name="example" accept="image/*" multiple></input>
    </>
  )
}

npm install zenn-markdown-html
npm install zenn-content-css
npm install zenn-embed-elements

import { useEffect, useState } from "react";
import markdownToHtml from "zenn-markdown-html";
import 'zenn-content-css';

// npm install zenn-markdown-html

export default function Home() {
  const [val, setVal] = useState("# これは見出し\nこれは*本文*\n- リスト\n- リスト\n- リスト\n[ZennのMarkdown記法一覧](https://zenn.dev/zenn/articles/markdown-guide)");
  function onChange(e) {
    setVal(e.target.value);
  }
  useEffect(() => {
    import("zenn-embed-elements")
  }, []);
  return (
    <div class="znc">
      <textarea style={{height: "500px", width: "700px"}} value={ val } onChange={ onChange }></textarea>
      <span dangerouslySetInnerHTML={{__html: markdownToHtml(val)}}></span>
    </div>
  )
}

# postcssはcssファイルを整理して１つのcssにまとめてくれる。autoprefixerはcssにシュガーシンタックスを提供する。
npm install -D tailwindcss postcss autoprefixer 
npx tailwindcss init -p

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

@tailwind base;
@tailwind components;
@tailwind utilities;

npm install @heroicons/react

import { BeakerIcon, InboxIcon } from '@heroicons/react/solid'
...
<BeakerIcon className="h-5 w-5"/>Lab
...

<html>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-radius: 10%;
            background-color: gray;
            animation-duration: 1s;
            animation-name: fadein;
        }
        @keyframes fadein {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 0.1;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
    <body>
        <div></div>
    </body>
</html>

<html>
    <style>
        div {
            position: fixed;
            opacity: 0;
            text-align: center;
            padding: 25px 50px;
            background-color: black;
            animation-duration: 2s;
            animation-delay: 1s;
            animation-name: fadein;
            animation-fill-mode: forwards;
        }
        @keyframes fadein {
            0% {
                opacity: 0;
                top: 0;
            }
            10% {
                opacity: 1;
                top: 10;
            }
            90% {
                opacity: 1;
                top: 10;
            }
            100% {
                opacity: 0;
                top: 0;
            }
        }
    </style>
    <body>
        <div></div>
    </body>
</html>

function salt() {
  return Math.random().toString().substring(2);
}

export function Knput() {
  const [page, setPage] = useState({});
  function oc(e) {
    // hashのスプレッド構文では[]をつけないとキー設定ができない（なぜ？）
    setPage({...page, [e.target.id]: e.target.value});
  }
  function submit() {
    setData(page.did, page).then(e => {
      console.log("Submit " + page.did);
    });
  }
  useEffect(() => {
    //　salt()を使っているのでここはuseEffectにしないとHTMLレンダリングとタイミングが合わずにエラーになる
    setPage({"title": "", "content": "", "did": salt(), "blog": "yuyu"})
  }, []);
  return (
    <>
      // ここではvalue設定はしない
      Title: <input id="title" onChange={ oc }></input>
      Content: <input id="content" onChange={ oc }></input>
      <button onClick={ submit }>Submit</button>
      <div>{ JSON.stringify(page) }</div>
    </>
  )
}

import { useRouter } from "next/router"

export default function Page(props) {
    const router = useRouter();
    return (
        <div>{ JSON.stringify(router) }</div>
    )
}

import { useRouter } from "next/router"

export default function Page(props) {
    const router = useRouter();
    return (
        <div>{ JSON.stringify(router.pathname) }</div>
    )
}

git remote -v

git remote add origin git@github.com:xxxxx/xxxxxx
git push --set-upstream origin main

function Tooltip({ text, children }) {
    const [show, setShow] = useState(false);
    return (
        <>
        <span className="cursor-pointer" onMouseOver={ _ => setShow(true) } onMouseLeave={ _ => setShow(false) } >{ children }</span>
        {
            show && <span className="text-xs text-white p-2 py-1 bg-slate-800 -translate-x-1/2 -translate-y-6 absolute rounded-sm">{ text }</span>
        }
        </>
    )
}

...
<Tooltip text="匿名で投稿ができます"><QuestionMarkCircleIcon className="h-3 h-3 inline -translate-y-1"></QuestionMarkCircleIcon></Tooltip>
...