サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
WWDC24
blog.stin.ink
このサイトを Next.js App Router で実装し直しました。Server Components が扱えてなんか便利なやつです。 移行にあたって学んだことや App Router の嬉しいポイントなどを書いておきます。 スタイリングメソッドの移行このブログサイトのスタイリングは vanilla-extract で書かれていました。Next.js の最新ドキュメントでは App Router でも vanilla-extract をサポートしたと書かれていましたが、ランタイム JS を必要とする CSS in JS 同様に Client Components でサポートしていると書かれていました。vanilla-extract は CSS in JS ですが完全に静的な CSS に変換されるため、Server Components でも使えそうな気はします。が、ドキュメントがそう言
Context を export するなみなさんは React Context を使っていますか?非常に便利ですよね。 え、使ってない?みんな React Context 使っとる。使ってへんのお前だけ。 冗談はさておき、この記事では Context を export するなという内容をお話しします。 React Context とはその前に React Context についてざっと解説していきます。 Context は、コンポーネントをまたいだ値の共有を実現するためのオブジェクトです。 createContext で生成することができます。 import { createContext } from "react"; const context = createContext<string>("initial value");
Fragment をコンポーネントのトップに置くな「Fragment をコンポーネントにトップに置く」というのは下のようなコンポーネントを作成することを指します。 export const MyComponent = () => { return ( <> <h1>This is a sample code.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Dui
このページを最初にブックマークしてみませんか?
『Home | stin's Blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く