LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@motoo1789(もとお)

Next.jsチュートリアルメモ

Posted at

概要

  • Next.jsを初めて触るにあたり、公式のチュートリアルを一通り行ったときのメモ
  • Nuxt.jsを触ったことがあるので似ているところや気にならなかったことはメモしていない

css

  • global.css はアプリケーション全体にcssを反映するファイル
  • 各々のファイルで読み込めばもちろん使えるがlayoutの一番上で　import すればOK
  • clsxは条件付きでclassの適用を分けたいときに使える記法
export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >
    // ...
)}

fonts / image

fonts

  • 1個目のやり方
/app/ui/fonts.ts
import { Inter } from 'next/font/google';
 
export const inter = Inter({ subsets: ['latin'] });
---------------------------------------------------------
import { inter } from '@/app/ui/fonts';
<body className={`${inter.className} antialiased`}>{children}</body>

image

  • 画像の付け方 Imageタグを使う
    • next/imageをimportする必要あり
    • widthとheightは指定するのが推奨
import Image from 'next/image';

<Image            
  src="/hero-desktop.png"            
  width={1000}            
  height={750}            
  className="hidden md:block"            
  alt="creenshots of the dashboard project showing desctop version"          
/>

Page / Layout

Page

  • appフォルダの中にフォルダを作るとパスが区切れる
  • フォルダの中でpage.tsxを作成するとそれが画面に表示されるページになる
    • app/dashboard/page.tsx

Layout

  • layout.tsxを作れば大丈夫
    • dashboard/layout.tsx
  • この例だとdashboardの子ディレクトリ全てにレイアウトが適用される
  • layoutとpageの関係
  • dashboard
    • layout.tsx
    • page.tsx
    • customers
      • page.tsx
  • おそらくchildrenでわたされるのはpage.tsxの中身
  • LayoutはPageをラップしているみたいなもんなのでこういう解釈であっているらしい
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}

Link

  • 書き方は<a>と同じ<Link>とかけばいい
  • 違いは<a>はページを全てrefreshする、<Link>は一部分だけリフレッシュする
    • その証拠にリロードはタブのアイコンが回らない
import Link from 'next/link';

<Link
  key={link.name}
  href={link.href}
  className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
>
  <LinkIcon className="w-6" />
  <p className="hidden md:block">{link.name}</p>
</Link>


'use client';
import { usePathname } from 'next/navigation';
const pathname = usePathname();

className={clsx(          
	"flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3",              
	{   
		'bg-sky-100 text-blue-600' : pathname === link.href,              
	},           
)}

Database

sqlを直で書く

  • sql<テーブルの型>で囲うのはtypescriptっぽい
  • テーブルの型（下のコードだとRevenue）はどこかに書いておく
  • もちらん、ORMなども使える
export async function fetchRevenue() {  
  try {    // Artificially delay a response for demo purposes.    // Don't do this in production :)
    // console.log('Fetching revenue data...');    // await new Promise((resolve) => setTimeout(resolve, 3000));
    const data = await sql<Revenue[]>`SELECT * FROM revenue`;
    // console.log('Data fetch completed after 3 seconds.');
    return data;  
  } catch (error) {    
   console.error('Database Error:', error);    
   throw new Error('Failed to fetch revenue data.');  
  }
}

Suspense

  • データフェッチの読み込み中に表示するローティング中みたいなやつ
  • ページ全てのコンポーネントにつけることもできるし、コンポーネント個別にも適用できる
  • スケルトン用のコンポーネントを作っておくこと
  • fetchが並列で動いているときに一つのfetchが重いことにより他のコンポーエンとも表示が遅れるのを防ぐ
  • 個別にぱっぱと出るのがイマイチなユーザー体験なら全体をスケルトンにするのもあり
<Suspense fallback={<CardsSkeleton />}>          
  <CardWrapper />        
</Suspense>

export function CardSkeleton() {
  return (
    <div
      className={`${shimmer} relative overflow-hidden rounded-xl bg-gray-100 p-2 shadow-sm`}
    >
      <div className="flex p-4">
        <div className="h-5 w-5 rounded-md bg-gray-200" />
        <div className="ml-2 h-6 w-16 rounded-md bg-gray-200 text-sm font-medium" />
      </div>
      <div className="flex items-center justify-center truncate rounded-xl bg-white px-4 py-8">
        <div className="h-7 w-20 rounded-md bg-gray-200" />
      </div>
    </div>
  );
}

export function CardsSkeleton() {
  return (
    <>
      <CardSkeleton />
      <CardSkeleton />
      <CardSkeleton />
      <CardSkeleton />
    </>
  );
}

Search / PageNation

  • useSearchParams：現在のパラメータにアクセスすることができる
    • set, delete, getがある
  • usePathname ：パスが取得できる
  • useRouter
    • replaceはパスとパラメータを書き換えることができる
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { useSearchParams, usePathname, useRouter } from 'next/navigation';
 
export default function Search() {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const { replace } = useRouter();
 
  function handleSearch(term: string) {
    const params = new URLSearchParams(searchParams);
    if (term) {
      params.set('query', term);
    } else {
      params.dete('query');
    }
    replace(`${pathname}?${params.toString()}`);
  }
}

<input
  className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
  placeholder={placeholder}
  onChange={(e) => {
    handleSearch(e.target.value);
  }}
  defaultValue={searchParams.get('query')?.toString()}
/>

Debouncing

  • 関数が実行される速度、間隔を制限する考え方
  • キーの入力が打ち終わった頃に更新かけたいなど
  • pnpm i use-debounce

cache

  • データベースから取得したデータなどはcacheして表示している可能性がある
  • ユーザーがフォームで新規データを作ったときにキャッシュを更新する必要がある
  • 下はキャッシュを手動で無効化して、更新するための関数を呼ぶ
import { revalidatePath } from 'next/cache';
revalidatePath('/dashboard/invoices');

redirect

import { redirect } from 'next/navigation';
redirect('/dashboard/invoices');

動的なroute

  • invoice
    • [id]
  • 上記のように[]で閉じたディレクトリは動的なルート変更ができるようになる
    • page , id などブログの各ページ、商品詳細など
  • [ここの中身]　[]の中身はpropsのparamsのキーとして渡してあげないといけないみたい
// 公式
export default async function Page(props: { params: Promise<{ id: string} >}) {
// promise無しでも動く
export default async function Page( props : { params: { id: string } }) {

Form

  • form、には通常FormData（名前などのformで入力する情報）しかactionに送れない
  • 技術記事のような画面では何のデータを更新するかのidが必要
  • なので関数をbindしてidを含めた新しい関数を作る
  • FormDataはNextが自動で渡してくれる、なのでidを別で渡すためにもbindの処理が必要だった
// 簡単に書くと動き的にはこう
const updateInvoiceWithId = (formData: FormData) => {
  return updateInvoice(invoice.id, formData);
};

// ...
import { updateInvoice } from '@/app/lib/actions';
 
export default function EditInvoiceForm({
  invoice,
  customers,
}: {
  invoice: InvoiceForm;
  customers: CustomerField[];
}) {
  const updateInvoiceWithId = updateInvoice.bind(null, invoice.id);
 
  return <form action={updateInvoiceWithId}>{/* ... */}</form>;
}

export async function updateInvoice(id: string, formData: FormData) {  
  const { customerId, amount, status } = UpdateInvoice.parse({
    customerId: formData.get('customerId'),    
    amount: formData.get('amount'),    
    status: formData.get('status'),  
  })
  const amountInCents = amount * 100;  
  await sql`    
    UPDATE invoices SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status} WHERE id = ${id} 
  `;

  revalidatePath(`/dashboard/invoices/`);  redirect('/dashboard/invoices');
}

エラーハンドリング

  • client componentである必要がある
  • error : Error Javascript標準のエラーオブジェクト
  • reset : エラー画面でリセットを実行するための関数、実行されるとサイレンダリングされる
    下のコードだとボタンのonclickで実行されるように
  • errorと一緒にあるdigest
    • エラーのチキ別：内容や発生場所を特定
    • ログの記録をdigestに
  • 404を個別に取得したい場合はnot-found.tsxファイルを作る
'use client';
 
import { useEffect } from 'react';
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Optionally log the error to an error reporting service
    console.error(error);
  }, [error]);
 
  return (
    <main className="flex h-full flex-col items-center justify-center">
      <h2 className="text-center">Something went wrong!</h2>
      <button
        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
        onClick={
          // Attempt to recover by trying to re-render the invoices route
          () => reset()
        }
      >
        Try again
      </button>
    </main>
  );
}

その他

react19

サーバーコンポーネント、

  • useStateなどをつかうclientで作られるコンポーネントでは書き換わるたびにfetchを読んだりして通信回数のコストがかかる
  • そこで最初のデータ取得などをした上でページをクライアントに返却しようというのがserver component
  • データのfetchなどのapiサーバーなどとの通信をする
  • サーバークライアントからfetchで得たデータをクライアントコンポーネントに送り細かいページの構成をする、もちろんユーザーの操作などの変化はclientコンポーネントなどで差分だけおこなわれることが多くなるはず
  • クライアントコンポーネントからサーバーコンポーネントのserver functionを呼ぶことができる
    • server functionの中には use server;と明示的に書く必要あり
    • クライアントからスムーズにサーバーへの通信を行うため、簡素化もできる
  • next.jsで基本的にはserver clientとなる
    • server function
  • clientは use clientと明示的に宣言する
    • useStateなどの副作用、イベントハンドラをもつと client component
  • 親に引っ張られるので親がserver clientなら子もserver component逆も然り
    • client componentの中にserver componentは書けないはず
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?