はじめに

こんにちわ！こんばんわ！ご観覧ありがとうございます。
定期的に雑色な記事を投稿します。(タイトルは記事のメインの内容にしてますが)
基本的には抱えている問題を改善し、改善方法を記事にしてアップしようと考えています。

今回の内容

AppRouterの気になった機能をつらつら書いていきます。

前回の内容

前回記事

パフォーマンス無関心で作ったサイトのパフォーマンスチューニング番外編 Nextjs AppRouter(色々試す2) - zare926のブログ

NextjsのAppRouterのRoute Handlers(API)ついて書きました。

SEOタグの設定

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'タイトルです！',
  description: '説明です！',
}

PageRouterの時は以下の方法でLighthouseが100点を出すそうです。

kiyobl.com

これはAppRouterいい仕事してますね。

何回も同じFetchすな！(Request Memoization)

簡単にいうと親子で同じFetchをしていたら1個にまとめてくれます！
1回しかFetchせず、データを使いまわしてくれます。
これはちょっと前にcacheを調べた時に起きてましたね。
確か、fetchの設定は親が優先されたはずです。
とりあえず優しい

Server Actions

まず、stableな機能ではないので注意です。

import db from './db';
import { redirect } from 'next/navigation';
 
async function create(formData: FormData) {
  'use server';
  const post = await db.post.insert({
    title: formData.get('title'),
    content: formData.get('content'),
  });
  redirect(`/blog/${post.slug}`);
}
 
export default function Page() {
  return (
    <form action={create}>
      <input type="text" name="title" />
      <textarea name="content" />
      <button type="submit">Submit</button>
    </form>
  );
}

//https://nextjs.org/blog/next-13-4#server-actions-alpha

簡潔にまとめると、APIで実装したいCreate処理などを直接書き込めちゃいます。

 'use server';

こいつが肝です
関数が複数ある場合は、ファイルの一番上に定義することも可能です。
てことはクライアントサイドには、見えないコードができるはずなので、見せたくないものを見せないようになどの使い方もできそうです。
fetch関数も使わなくてすみます。
一応設定が必要
next.config.js

module.exports = {
  experimental: {
    serverActions: true,
  },
}

サーバーコンポーネントでは、UIコンポーネントが使えない！！

MUIやChakra UIが使えません！
サーバーでは動かせないemotionを使っているからだそうです。
クライアントコンポーネントで使用することはできます。
Chakra UIでこうしろと書いてありました。

chakra-ui.com

最後に

調べて気になったのはこの辺りでしたね。
統括してまとめてるサイトは結構あるんですが、メモして自分も記憶出るようにと書いてみました。
ここまで読んでいただいてありがとうございました！！