Zenn
Open9

T3 stack練習

Next.js
TypeScript
Prisma
Tailwind CSS
tRPC
ピン留めされたアイテム
pandanosepandanose

環境構築

next.js準備

npx create-next-app@latest . --typescript --tailwind --eslint
src/ directory? > No
App Router? > Yes
import alias? > No

次に各パッケージをインストール

npm i lucide-react @prisma/client next-auth @next-auth/prisma-adapter bcrypt @trpc/client @trpc/react-query @trpc/server react-hot-toast react-icons react-images-uploading cloudinary-build-url cloudinary nodemailer

バージョン変更

手動でpackage.jsonから変更し、npm i

npm i

uiはshadcnを使用

shadcnはradix UIとtailwindcssで構築されたコンポーネントUI

npx shadcn-ui@latest init

#option
Ok to proceed? (y)
✔ Would you like to use TypeScript (recommended)? … no / yes
✔ Which style would you like to use? › New York
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … app/globals.css
✔ Would you like to use CSS variables for colors? … no / yes
✔ Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) …
✔ Where is your tailwind.config.js located? … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Are you using React Server Components? … no / yes
✔ Write configuration to components.json. Proceed? … yes

使用するUIをインストール

npx shadcn-ui@latest add button dropdown-menu form input toast textarea
pandanosepandanose

react基礎

useState,useEffect

ちなみに、React.StrictModeを採用している場合、useEffectは2回発火するらしい（prdは1回）

const [count,setCount] = useState(0)

const handleClick = () => {
     // set要素に入れた値をuseStateは保持する。下記だとcount + 1を保持する
     setCount(count + 1);

     // 読み込み時に発火、第２引数に変数を入れるとその変数が変化したときにも発火する
     useEffect(() => {
          console.log("hello")
     },[count]);
}

useContext


const userInfo = {
     name: "tester",
     age: 24
};

const UserInfoContext = createContext(userInfo);

// 下層をタグで囲う
ReactDOM.createRoot(document.getElementById("root")).render(
     <UserInfoContext.Provider value={userInfo}>
          <App />
     </UserInfoContext>
);

下層で使用する場合はuseContextをimportするだけ


import {useEffect,useState,useContext} from "react";

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const [count,setCount] = useState(0)

const userInfo = useContext(UserInfoContext);

const handleClick = () => {
     // set要素に入れた値をuseStateは保持する。下記だとcount + 1を保持する
     setCount(count + 1);

     // 読み込み時に発火、第２引数に変数を入れるとその変数が変化したときにも発火する
     useEffect(() => {
          console.log("hello")
     },[count]);
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

return(
     <p>{userInfo.name}</p>
     <p>{userInfo.age}</p>
)