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
![GitHub - vordgi/nimpl-getters: Implementation of server getters in React Server Components without switching to SSR](/_next/image?url=https%3A%2F%2Fpublic-content.hackersheet.com%2Fwebsite-og-images%2F6aab4421-f819-4bdf-bced-365e67220ae6.png&w=3840&q=75)
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ゲーム機のビットマップフォントのような感じを出せるフリーフォントです。
itouhiro.hatenablog.com
![PixelMplus(ピクセル・エムプラス) ‥ 8bitビットマップふうフリーフォント - itouhiroはてなブログ](/_next/image?url=https%3A%2F%2Fpublic-content.hackersheet.com%2Fwebsite-og-images%2F9d1b789d-044c-46c5-bbae-2b063f218605.png&w=1080&q=75)