Nextjs(react) : 基礎②
useRouter()
import { useRouter } from "next/navigation";
---
const router = useRouter();
---
try {
const { error: signInError } = await supabase.auth.signInWithPassword({
email: email,
password: password,
});
await router.push("/dashboard"); // ログイン後にリダイレクトする
** importするときは next/navigation でインポートする **
そうでないと Mouted エラーになる
https://nextjs.org/docs/messages/next-router-not-mounted
https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating
routerの使い方は上記のような感じでページ移動に使える
フォルダ構成例
- HeaderやFooterの配置例
- あまりいじらないコンポーネントは分けた方がわかりやすい
- componentsやlibフォルダはappの外に置いた方がわかりやすい
例:src/ app , components , lib /
() , ルーティングに含まない
- ()でくくるとルーティングに含まれないフォルダになる
- 機能ごとに分ける使い方
例:app/(auth)/login.jsx , logout.jsx
基本のレイアウト
<html lang="ja">
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
<body className={inter.className}>
<Header />
{children}
<Footer />
</body>
</ThemeProvider>
</html>
- footer と header はapp/layout.jsx , body内に配置
next/image
nextjsの <Image /> は src , alt , width , height が必須だが、
sizeに関しては fill だけでもOK onject-coverと合わせると良い
例:
<Image src={url} alt="image" fill className="object-cover"></Image>
***********
でもあまり使わない方がいいかも
***********
データベースに絡めて使うとエラーに
has "fill" and a height value of 0. This is likely because the parent element of the image has not been styled to have a set height.
いつも通り width={} height={} に直すとうまくいった
外部の画像 / nextConfig.js
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{ protocol: "https", hostname: "img.clerk.com" },
{ protocol: "https", hostname: "res.cloudinary.com" },
{ protocol: "https",hostname: "images.pexels.com }
],
},
};
module.exports = nextConfig;
remotePatternsの配列内に足していく。
- topページのURLではなく、画像なら画像を開いたときのURLを参照する
- OK:images.pexels.com , X:www.pexels.com
ルーティングとpage.tsx
- app内のフォルダはすべてルーティングになるわけではない
- page.tsxがあるとルートになる
- page.tsxが無い場合はフォルダの先頭に[_]アンダーバーを付ける等で区別するのも有り
appより下層のlayout.jsx
- app下のlayout.jsxより下の階層でもlayout.jsxは作れる
例:app/blog/page.jsx , layout.jsx/[slug]/page.jsx
layout.jsx
===
import React from "react";
const BlogLayout = ({ children }) => {
return (
<>
<div>BlogLayout</div>
{children}
</>
);
};
export default BlogLayout;
- blogルーティング以下で共通ではない部分をchildrenで受け取る