Waku
Minimalistic React Framework
ほとんどNext.jsと同じだ
軽い実装のNext.jsみたいな感じか
Next.jsを知っている人なら、知識をほぼそのまま応用できる
Node.js非依存
Cloudfareなどにもdeployできる
$ npm create waku@latest
tailwind cssが最初から入ってる
各pageではgetConfigをexportしておく
code:ts
export const getConfig = async () => {
return {
render: 'static',
} as const;
};
static: SSG
dynamic: SSR
pageの種類
signle route
e.g. ./src/pages/about.tsx
segment route
e.g. ./src/pages/blog/[slug].tsx
code:ts
export default async function BlogArticlePage({ slug }) {
const data = await getData(slug);
return <>{/* ...*/}</>;
}
getConfigにstaticPathsを指定可能
catch-all route
e.g. /app/[...catchAll]
layouts
_layout.tsx
Navigation
<Link/>
useRouter
metadata
metaタグのhoist
./private/
RSCのみからアクセスできる
mutations
server actions
server actionsをSCからCCにpropsで渡せる
code:ts
export default async function ContactPage() {
const sendMessage = async (message: string) => {
'use server';
await db.messages.create(message);
};
return <ContactForm sendMessage={sendMessage} />;
}
bind
code:ts
export const ContactForm = ({ author = 'guest' }) => {
const sendMessageWithAuthor = sendMessage.bind(null, author);
return (
<form action={sendMessageWithAuthor}>
<textarea name="message" rows={4} />
<button type="submit">メッセージを送信</button>
</form>
);
};
env
基本private
WAKU_PUBLIC_をprefix煮付けたらpublic
SCではgetEnv関数を介してアクセス
CCではimport.meta.envを介してアクセス
デフォルトでserver component
2024/3の記事だが、2024/12現在すでにディレクトリ構成が変わってる