ことの発端 普段、Electronアプリを制作する際は、 Next.jsのElectron + TypeScriptのexample を使っています。github.com yarn create next-app --example with-electron-typescript app-nameで、Electron + Next.jsの雛形が作成できるので非常に便利です。…
const arr = ['a', 'b', 'c', 1, 2, 3].map((item) => { if (typeof item === 'number') { return item * 2; } }); console.log(arr); // => [undefined, undefined, undefined, 2, 4, 6] みたいなケースで、undefinedを削除したい場合、filterを使って、 co…
document.querySelectorAll と、 document.getElementsByTagName document.getElementsByClassName document.getElementsByName は、いずれもNodeListを返すメソッドです。が。返ってくるNodeListは微妙に異なっています。 具体的には、Static NodeList 返っ…
前回 に引き続き、Next.jsのlocalとVercelの挙動の違いについてです。まずは、こちらのソースコードをご覧ください。 ソースコード src/api/timestamp/route.ts import { NextResponse } from 'next/server'; export async function GET(request: Request) {…
いままで、あまりAPIを作ってこなかったので知りませんでしたが、Hobbyプランだと、 Serverless Functionは10秒でタイムアウト するようです。vercel.com ソースコード src/app/api/develop/route.ts import { NextResponse } from 'next/server'; export as…
以前、 Three.js で EffectComposer の UnrealBloomPass を試しました。blog.kimizuka.org今回は、EffectComposer の GlitchPass を試してみました。 DEMO https://kimizuka-org-git-r154-kimizuka.vercel.app/glitch-passグリッチが掛かります。 ソースコー…
かつては、こちらの記事を参考にメタフィールドを取得していました。www.shopify.com メタフィールド取得例 { products(first: 10) { edges { node { metafields(first:10) { edges { node { key value } } } } } } } blog.kimizuka.org参考にした記事が書か…
ことの発端 github.comREADME の記載に従って、 import Client from 'shopify-buy'; // Initializing a client to return content in the store's primary language const client = Client.buildClient({ domain: 'your-shop-name.myshopify.com', storefron…
先日、 Blenderでオブジェクトを発光させました が、今回はThree.jsでオブジェクトを発光させる手順のメモです。 Three.jsとNext.jsを使っていますが、本質的な部分としては Three.jsのEffectComposer と postprocessing unreal bloom を使って実装します。t…
かつて、 動的インポートを使ってNext.jsでサーバサイドレンダリングしないコンポーネントをつくったこと がありました。blog.kimizuka.orgこのときは、default export を使ってエクスポートしているコンポーネントを対象にしていたのですが、名前付きのエク…
Blenderでオブジェクトを発光させる手順のメモです。 バージョンは3.3.6を使っています。 ❶ 3Dビューのシェーディングを変更する「ソリッドモード」では発光具合の確認ができないので、「マテリアルプレビュー」か「レンダープレビュー」に変更します。 僕は…
App Router（Next.js 13.4.4）のSSGで作成したサイト を、 ISR にしたらどれぐらいパフォーマンスが変わるのかを比べてみようと思い、キャッシュ を調べながら、SSGからISRに切り替えてみました。blog.kimizuka.org nextjs.org nextjs.org DEMO（SSGバージョ…
かつて、 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を使う場合で…
