SPORT in Life~
ankle0614@gmail.com
準備
Linux環境でプロジェクトを作成します
npx create-next-app -e with-tailwindcss insta-2-ytcomponentsフォルダを作成し、その直下に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> next.config.js変更
ホワイトリストにpapareact.comを追加します
module.exports = {
images: {
domains: ["links.papareact.com"],
},
};
iconsインストール
下記コマンドでインストールします
npm install @heroicons/reacttailwindcss/formsインストール
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あわせて読みたい
クライアントIDの作成
.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コンポーネントを作成
Google Cloud
APIとサービスから認証情報を作成をクリックし、OAuth2.0クライアントIDでウェブクライアントを選択
承認済みのJavaScript生成元にhttp://localhost:3000を追加
rfceでreactコンポーネントを作成
_app.js
SessionProviderで
ABOUT ME
