Eigo-Mt-Fuji / catchup-nextjs-13-14

0 stars 0 forks source link

UIミートアップ11/19 #20

Open Eigo-Mt-Fuji opened 11 months ago

Eigo-Mt-Fuji commented 11 months ago
Eigo-Mt-Fuji commented 11 months ago

どの順番でどう動く? なぜ関心もったかは整理しておく できることをやるしかない 即効性 応用範囲 気になるもの

今の案件で何を設計してる? 前に進む力になるもの。

Eigo-Mt-Fuji commented 11 months ago
Eigo-Mt-Fuji commented 11 months ago

https://speakerdeck.com/mugi_uno/next-dot-js-app-router-deno-mpa-hurontoendoshua-xin?slide=16

Eigo-Mt-Fuji commented 11 months ago

For example, when clicking on a photo in a feed, you can display the photo in a modal, overlaying the feed. In this case, Next.js intercepts the /photo/123 route, masks the URL, and overlays it over /feed.

https://github.com/vercel-labs/nextgram/blob/main/src/app/layout.tsx

import { Slot } from "@radix-ui/react-slot";

function Anchor({ props }) {
  return <Slot {...props} />;
}

export default function App() {
  return (
    <div className="App">
      <Anchor href="/about">
        <a>Link</a>
      </Anchor>
    </div>
  );
}

実際のAppの描画結果は以下のようになり、aタグにhrefが渡されます。

<div class="App">
  <a href="/about">Link</a>
</div>