40代
ankle0614@gmail.com
SPORT in Life~
Linux環境でプロジェクトを作成します
npx create-next-app -e with-tailwindcss insta-2-yt
componentsフォルダを作成し、その直下にHeader.jsファイルを作ります。
rfceでreactコンポーネントを作成
「pointer-events」は要素のクリック・タップイベントを無効化するときに仕様されます。
inset-y-0はtop: 0; 、bottom: 0;を設定し、上下方向に要素を伸ばしている。
<div className="absolute inset-y-0 pl-3 flex items-center pointer-events-none">
<SearchIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</div>
ホワイトリストにpapareact.comを追加します
module.exports = {
images: {
domains: ["links.papareact.com"],
},
};
下記コマンドでインストールします
npm install @heroicons/react
npm install @tailwindcss/forms
plugins: [
require("@tailwindcss/forms"),
],
globals.cssに以下のコードを追加することで独自のユーティリティクラスを使用できます。
@layer components {
.navBtn {
@apply hidden h-6 md:inline-flex hover:scale-125 cursor-pointer transition-all duration-150 ease-out;
}
}
npm i next-auth
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
npm i firebase
.env.local
GOOGLE_CLIENT_ID=174140500118-dtltibtk42acltvde0raaj1i64bob0dr.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=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
NEXTAUTH_URL=http://localhost:3000
pagesフォルダの直下にauthフォルダを作成し、signin.jsを作成
rfceでreactコンポーネントを作成
APIとサービスから認証情報を作成をクリックし、OAuth2.0クライアントIDでウェブクライアントを選択
承認済みのJavaScript生成元にhttp://localhost:3000を追加
rfceでreactコンポーネントを作成
SessionProviderで