かつて、 Page Routerを使ったNext.jsのプロジェクトでサイトマップを自動で生成したこと がありました。blog.kimizuka.org今回は、App Router版です。 といっても、とくに難しいことはありません。 ドキュメント に書いてある通りです。nextjs.orgPageRoute…

かつて、 ブラウザの標準のページスクロールをループさせたこと がありました。blog.kimizuka.orgしかし、こちらの DEMO は、PCでみるとそれなりにいい感じに動作するのですが、iOSのSafariでみるとループの瞬間にカクついてしまいます。今回はカクつかない…

PageRouterで404ページをカスタムしたい場合は、pages/404.tsx（もしくはpages/404.jsx）を作成すればOKでした。nextjs.orgApp Routerの場合は、app/not-found.tsx（もしくはnot-found.jsx）を作れば良いようです。nextjs.orgなので、AppRouterを使う場合で…

JavaScriptでは数値が64ビットの浮動小数点数で表されます。突然ですが、問題です。 0.3 / 0.1の答えは幾つになるでしょう。普通に考えれば3になります。 では、JavaScriptで計算してみましょう。2.9999999999999996となりました。 なぜならば、前述の通り、…

長らくiOSのSafariでは、input要素にuser-select: noneを掛けると、フォーカス時にキーボードが表示されませんでした。 僕は、ElectronやPWAを開発することが多いので、 * { -webkit-user-select: none; user-select: none; としてしまうことが多かったので…

はじめに blog.kimizuka.orgこちらの記事 のNext.js版です。 yarn dev で立ち上がるサーバをhttpsでアクセスできるようにします。※ 正確には yarn dev は上書きせずに yarn dev:https を作ります 証明書の発行 ターミナルから、 ❶ 秘密鍵の発行 openssl genr…

メディアクエリでパソコンとスマホのデザインを出し分ける際、ブレイクポイントを一括で編集できるようにスクリプトを使って書き出すようにしています。 mediaQuery.ts const mobileMaxWidth = 768; export function isPc(width: number) { return mobileMax…

View Transitions API とは まずは、Google Chromeでこちらをご覧ください。http203-playlist.netlify.appChrome Developers で紹介されている View Transitions API が体験できるサイトです。developer.chrome.comリンクをクリックするとURLが切り替わって…