Next.jsのサーバーコンポーネントで pathname の取得が簡単にできるようになってた
GitHub - vordgi/nimpl-getters: Implementation of server getters in React Server Components without switching to SSR
Implementation of server getters in React Server Components without switching to SSR - vordgi/nimpl-getters
github.com
npmのパッケージをインストールするだけでできる。
Terminal
pnpm add next-impl-getters
server
import { getPathname } from 'next-impl-getters/get-pathname'
export default function Component() {
const pathname = getPathname()
return (
// ...
)
}
以下のクライアントコンポーネントと同じ感じで取得できる。
client
'use client'
import { usePathname } from 'next/navigation'
export default function Component() {
const pathname = usePathname()
return (
// ...
)
}
VS Codeの便利な設定 Sticky Scroll の設定方法
スクロールしたときにメソッド名などが上部に固定されて便利。
settings.json
{
"editor.stickyScroll.enabled": true,
"editor.stickyScroll.maxLineCount": 5,
}
Reactでタグ名を指定できるコンポーネントの作り方
以下のコードで出力されるHTMLは <main>Hello.</main> になる。
import { PropsWithChildren } from 'react'
export interface ComponentProps extends PropsWithChildren {
tagName?: keyof JSX.IntrinsicElements
}
export default function Component({ tagName, children }: ComponentProps) {
const TagName = tagName ?? 'div' // TagName は大文字から始める必要がある
return <TagName>{children}</TagName>
}
function Page() {
return <Component tagName="main">Hello.</Component>
}
レトロゲーム風のフォント
ゲームを作るときに、このフォントを使ってみよう。
PixelMplus（ピクセル・エムプラス） ‥ 8bitビットマップふうフリーフォント - itouhiroはてなブログ
PixelMplus（ピクセル・エムプラス）というフォントを作成しました。 8bitゲーム機のビットマップフォントのような感じを出せるフリーフォントです。
hatenablog.com
