Zenn
Open1

Next.js learn

Namikawa GakuNamikawa Gaku

TypeScriptについて

export type Invoice = {
  id: string;
  customer_id: string;
  amount: number;
  date: string;
  // In TypeScript, this is called a string union type.
  // It means that the "status" property can only be one of the two strings: 'pending' or 'paid'.
  status: 'pending' | 'paid';
};

Tailwind とCSS モジュールの２つのスタイル設定がある。
CSS モジュールは各コンポーネントに一意のCSSを設定することができるため、競合を起こしにくい。

clsx

https://www.npmjs.com/package/clsx
ドキュメント
https://github.com/lukeed/clsx

Inter要素

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

カスタムフォントの適用 api/ui/fonts.ts

import { Inter, Lusitana } from 'next/font/google' 

export const inter = Inter({ subsets: ['latin'] });
export const lusitana = Lusitana({
    weight: ['400', '700'],
    subsets: ['latin'],
  });

上記では2つのカスタムフォント(googleフォント)を適用している
<Image> next/imageを使用した画像の最適化

import Image from 'next/image';

layout.tsx

複数のページで共有される UI を作成できます。

app/layout.tsx　
上記をルートレイアウトと呼びます。

Next.jsはリンクされたルートのコードをバックグラウンドで自動的にプリフェッチする。

ルート ハンドラー

app/api/route.jsで定義される
React Server Components
非同期タスクにより有効な性質を持つ。
データベースから直接データをフェッチできます。

非同期コンポーネント(async)

export default async function Page

静的レンダリング

動的レンダリング

await new Promise((resolve) => setTimeout(resolve, 3000)); 3秒の遅延を追加している。
setTimeout関数 = 指定した時間以後、関数を実行する。
APIからデータを取得した後に、そのデータを使用する前に一定時間待機する必要がある場合などに使用できます。また、非同期処理の実行を順番に制御するためにも使用可能。
const data = await sql<Revenue>`SELECT * FROM revenue`;

await
Promiseが resolve(解決)　or reject(拒否)するまで処理を待つ。

ストリーミング

()を使用して新しいフォルダーを作成すると、その名前は URL パスに含まれません

React Suspense

<Suspense>コンポーネント
特定のコンポーネントが非同期処理を行なっている際の挙動を設定できる

<Suspense fallback={<RevenueChartSkeleton />}>
      <RevenueChart />
    </Suspense>

<RevenueChart />の非同期処理中に、<RevenueChartSkeleton />を表示している。

ストリーミング中にユーザーにどのような体験をしてほしいか？

</Suspense>を使うことでローディング後の表示タイミングを制御可能

SQL を使用して必要なデータのみを取得

部分的なプリレンダリングとは？

プリレンダリング?
サーバー上でHTMLが用意されている状態のこと

  • サーバーサイドレンダリング

Next.jsはルーティングロジックが組みやすい
ファイルベースのルーティングシステムを完備
ルーティングロジックがより動的