🔖

Next.js App Router (app ディレクトリ) の逆引き辞典

Honey32

2023/04/16に公開

1件

Next.js

tech

株式会社ゆめみPublication

みんな知ってるあのサービスも、ゆめみが一緒に作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用の内製化支援。Swift,Kotlin,Rust,Go,Flutter,ML,React,AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中

Discussion

x-tax

良い記事ありがとうございます！

children を使う

は少し慣れが必要そうですね。。

├── app
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   ├── page.module.css
│   ├── page.tsx
│   └── samples
│       ├── ClientComponent.tsx
│       ├── ServerComponent.tsx
│       └── page.tsx

page.tsx

import ClientComponent from "./ClientComponent";
import ServerComponent from "./ServerComponent";

export default function Sample() {
  return (
    <>
      <ClientComponent>
        <ServerComponent />
      </ClientComponent>
    </>
  );
}

ServerComponent.tsx

export default function ServerComponent() {
  return <>Hello</>;
}

ClientComponent.tsx

"use client";

import { ReactNode } from "react";

type Props = { children: ReactNode };

export default function ClientComponent({ children }: Props) {
  return <>{children}</>;
}