Next.js
useRouterの公式ドキュメントがこちら。nextjs.orgasPathの項目には、 asPath: String - The path as shown in the browser including the search params and respecting the trailingSlash configuration. basePath and locale are not included. https://n…
結論 「Project Setting > Deployment Protection > Vercel Authentication」をDisabledに設定すればOKです。 ことの発端 普通はこんな使い方しないと思うのですが、LINE BotのWebHookに使うためのAPIをVercelにデプロイした際に気がつきました。blog.kimizu…
前回は、LINEBot用のスクリプトを作成しましたが、その際はNgrokをつかって公開し、動作を確認しました。blog.kimizuka.orgblog.kimizuka.orgblog.kimizuka.orgしかし、実際に永続的に運用していこうとなると、APIとしてどこかしらで動かし続けた方がよさそ…
以前、LINEBot用のスクリプトを作成しましたが、その際はNgrokをつかって公開し、動作を確認しました。blog.kimizuka.orgblog.kimizuka.orgblog.kimizuka.orgしかし、実際に永続的に運用していこうとなると、APIとしてどこかしらで動かし続けた方がよさそう…
Vercelが @next/third-parties というライブラリを提供してくれているので、それを使えばGA4の導入も楽々です。www.npmjs.com@next/third-parties はGoogle Tag Managerにも対応しているのですが、今回はGA4を直接導入します。 ソースコード（抜粋） src/app…
Next.js（App Router）で作成したポートフォリオサイトにRSSフィードを実装してみました。https://kimizuka.fm/rss.xmlキャッシュの設定が適切にできているかに不安が残りますが、実装方法をメモしておきます。 今回はサイトをデプロイするたびに、ルート直…
まず、ドキュメントを読むとすべてが書いてあります。 書いてあるのですが、プレビュー環境と本番環境でrobots.txtを出し分けたかったので、色々検証してみました。nextjs.orgまずは、ほぼほぼドキュメント通りの実装。 app/robots.ts import { MetadataRout…
ことの発端 普段、Electronアプリを制作する際は、 Next.jsのElectron + TypeScriptのexample を使っています。github.com yarn create next-app --example with-electron-typescript app-nameで、Electron + Next.jsの雛形が作成できるので非常に便利です。…
![はてなブックマーク - Electron + Next.jsの開発で、yarn devを実行した際にエラーが発生する際の対策（Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/electron-next/node_modules/electron-is-dev/index.js from /node_modules/electron-next/index.js not supported. 編） 💪](https://b.hatena.ne.jp/entry/image/https://blog.kimizuka.org/entry/2024/02/21/014357)
前回は、Node.jsからOpen AIのAPIをさささっと叩いてみることを目標に、適当な日本語を返してもらいましたが、今回は画像に写っているものを説明してもらおうと思います。blog.kimizuka.org import OpenAI from 'openai'; const openai = new OpenAI({ apiKe…
nextjs.org PageRouter const { useRouter } = require('next/router'); export function DetailPageTemplate() { const router = useRouter(); return ( <div> <p>{ router.query.slug }</p> </div> ); } と、PageRouterの時はuseRouterで取得できていた、slugなのですが、App…
blog.kimizuka.org前回、静的なウェブサイト、動的なウェブサイト、デスクトップアプリをNext.jsで作成しているという話をしましたが、実は今年からプレゼンテーションの資料もNext.jsでつくっています。もともとは、Keynoteで資料を作成していたのですが、 …
最近は、静的なウェブサイトも、動的なウェブサイトも、デスクトップアプリもNext.jsで開発しています。 もっというと、スマホアプリもExpoを使っているのですが、ExpoはReactではあるものの、Next.jsではないので今回は除外します。Next.jsのすべての機能を…
Next.jsを使って、スマートフォン用のPull to Reflash（引っ張って更新）を実装しました。 DEMO https://next-pull-to-refresh.vercel.app/※ スマートフォン限定です ソースコード PullToRefreshView.tsx 'use client'; import styled, { keyframes } from '…
昔つくったNext.jsのプロジェクトを久しぶりに修正しようと思ったのですが、.node-versionが14.21.3でした。 流石に14は古すぎるので、18.17.1までバージョンアップし、 yarn devを実行したところ、 Error: error:0308010C:digital envelope routines::unsup…
ことの発端 普段、Electronアプリを制作する際は、 Next.jsのElectron + TypeScriptのexample を使っています。github.com yarn create next-app --example with-electron-typescript app-nameで、Electron + Next.jsの雛形が作成できるので非常に便利です。…
前回 に引き続き、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グリッチが掛かります。 ソースコー…
先日、 Blenderでオブジェクトを発光させました が、今回はThree.jsでオブジェクトを発光させる手順のメモです。 Three.jsとNext.jsを使っていますが、本質的な部分としては Three.jsのEffectComposer と postprocessing unreal bloom を使って実装します。t…
かつて、 動的インポートを使ってNext.jsでサーバサイドレンダリングしないコンポーネントをつくったこと がありました。blog.kimizuka.orgこのときは、default export を使ってエクスポートしているコンポーネントを対象にしていたのですが、名前付きのエク…
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を使う場合で…
はじめに blog.kimizuka.orgこちらの記事 のNext.js版です。 yarn dev で立ち上がるサーバをhttpsでアクセスできるようにします。※ 正確には yarn dev は上書きせずに yarn dev:https を作ります 証明書の発行 ターミナルから、 ❶ 秘密鍵の発行 openssl genr…
View Transitions API とは まずは、Google Chromeでこちらをご覧ください。http203-playlist.netlify.appChrome Developers で紹介されている View Transitions API が体験できるサイトです。developer.chrome.comリンクをクリックするとURLが切り替わって…
Next.js 13.4からApp RouterがStableになりました。 普段、Next.jsを静的サイトジェネレータとして使っている自分としては、App Routerの恩恵は少ないような気がしていたのですが、App Routeをつかっても静的書き出しができることを知ったので、これからは時…
かつて、Safariでアクセスした際と、PWAとしてホーム画面に追加した後に開いた際でページの見た目を変更するウェブサイトをつくったことがあるのですが、今回はそれをNext.jsに移植してみようと思います。youtu.begithub.com DEMO web-app-store-kit.vercel.…
かつて、Next.js 12でミドルウェアを使ったBasic認証の設定方法を 記事 にまとめましたが、Next.js 13になって、ミドルウェアの設定方法に微妙な変更があったため調査しました。blog.kimizuka.orgnextjs.org 変更点 middleware.tsの位置変更 前回の方法 をそ…
最近、Electronアプリを制作する際は、 Next.jsのElectron + TypeScriptのexample を使っています。github.com先日、 yarn dev ではpublicディレクトリの画像が読み込めるのに、yarn dist で書き出したアプリからは読み込めないという事態に出会したので、調…
