New ios 26 and macos were released a few days a ago. Seems like that even through there are lots of bug reports and usability problem, they still released it anyway. I don’t update software on day one(except feature/security update for applications) like when I used to be. Starting Apple intelligence and now new design language of ios/macos. I honestly just feel like this is more of hypes to stimulate users brain and beg investor....
I think I kind of feel tired of ts/js ecosystem. I think it comes down to these things. constant change of library The package library move fast. Next.js/React does not ship with auth, ui library and so on. The developer choose whatever package they want to install and create feature based on it. cool. However, the new package constantly appear like ohh this is new ORM and auth library. This is new schema validation library!...
将来ちゃんとしたAPIのエンドポイントを作るか迷っていたため、RSCにてDBクエリを書く方法で行くか迷っていたためNext.js API routesに書いていたんですがtypeのinferしてくれなくて使いづらいかった。 まずはこんな感じで api routes export async function GET( request: NextRequest, { params }: { params: Promise<{ id: string }> } ) { try { const { id } = await params; const spot = await db.query.napSpots.findFirst({ where: eq(napSpots.id, id), with: { ratings: { with: { user: true, }, }, }, }); if (!spot) { console.error("[API] Nap spot not found for ID:", id); return NextResponse.json( { error: "Nap spot not found" }, { status: 404 } ); } return NextResponse....
duckduckgoのseach bangのように使用できます。 ブラウザ上の設定より検索ショートカット欄へ行きます。 現在はchatgpt, perpletyしかログインなしでのクエリ検索はできないです。 これでブラウザ拡張なしでできます。 やりかた 下記のリンクをコピーしてブラウザより検索してください。 firefox系統はこちらより about:preferences#search chromium系統はこちらより chrome://settings/searchEngines ChatGPT https://chatgpt.com/?q=%s Perplexity https://www.perplexity.ai/search?q=%s 以下のようになります。 これに好きなキーショートカット（バインディング）例えば、@ch でchatgptなどをブラウザの検索バーにいれて検索するとchatgptのサイトにちょくに飛び質問に対して答えてくれます。
LT会にてWebレンダリングについて発表したことが以下になります。 こちらがspeakerdeckのリンクです またこちらがダウンロードできます
SSR ? Sever islands? Server side rendering(SSR)とはブラウザからのリクエストをサーバー上データをフェッチしたなどの上で生成されたhtmlを返す方法です。 Server islandsとはSSRと多少似てはいますが、返ってくる静的htmlがjsバンドルをもっておりそこからその部分のJSからサーバーにデータをとりにいったりするという方法です。 対象 CSRからSSRまたはServer Islandsモデルでのプロジェクトに関わるかた。 SSR/Server IslandsモデルではどうやってCDNを使用するか。 SSRとのAstroにおけるServer islandsでのCDNの静的htmlの違い。 SSRでは、静的なhtmlをいわゆる静的なファイルをおくcdn上に置くことはできません。 CSRではCDNに静的HTMLをおいてありそこからすぐに送り返すことができました。 しかし、SSRではデータをフェッチする時やランディングページが動的なコンポーネントがある場合はedge computing といわれるそこにHTMLをおいてそこからブラウザに送って上げるというかたちになります。 しかし、それらを提供しているのはvercel, netlifyなどであり、また会社のチームでそのようなものをサービスを通さずにつくるのは自前で作成するのは複雑という面もあるかと思います。 ここで Astroが静的htmlを返す方法が活躍します。 Astroにてブラウザがリクエストを送った際に返ってくるのは静的なHTMLです。そこに必要なJSバンドルがついておりそこからそのJSファイルを読みデータフェッチやイベントハンドラーなど必要な作業をします。 一番の違いは静的HTMLであるということです。このメリットは以外にも大きくて一番はCDNなどに静的ファイルであるためおいておけるというメリットがあります。上記で述べたSSRモデルとは違い、インフラの面においてもS3,R2などにもホスティングできるのでそこまで複雑にはならないです。 まとめ。じゃあどれを採用するか。 どんな種類のアプリを開発するかなどいろいろな視点がありますがCDNの面に視点を当てると Next.js: SSRでは、edge computingや動的コンテンツ用のCDNワなど、より複雑なCDN戦略が必要となります。 静的レンダリングと動的レンダリングを組み合わせたハイブリッド・アプローチが有効な場合がある。Experimental PPR (Partial Pre-Rendering) Astro： ほとんどのコンテンツでCDNキャッシングを活用しやすい 静的HTMLをCDN経由で効率的にグローバルに配信可能 などが採用する際にCDNに関して考えることかと今のところは思います。
PinoをHono.jsにて使用する。 Pino loggerを使用して Honoのサーバーのログを書き出します。 Hono.jsを使用したウェブサーバーは今回はdeno(ver 2.1.4)にて走っています。 Honoの標準のログの仕方。 こちらはhonoデフォルトのログの作成の仕方です。Hono logドキュメント import { logger } from "hono/logger"; const app = new Hono(); app.use("*", logger()); 以下のようなログのみしか表示されないです。 --> GET /api/docs 200 2ms <-- GET /api/docs なのでnodeではよく使用されるpinoを使用して行きます。 Pinoを使用したログ import { pino } from "npm:pino"; import { pinoLogger } from "npm:hono-pino"; import pretty from "npm:pino-pretty"; export function pino_Logger() { return pinoLogger({ pino: pino( { level: Deno.env.get("LOG_LEVEL") || "info", }, Deno.env.get("DENO_ENV") == "production" ? undefined : pretty() ), http: { reqId: () => crypto....
使用技術など Hono.jsを使用してapiのrate limitの実施を使用して見ます。 RedisはUpstashを使用しています。 Hono.jsを使用したウェブサーバーは今回はdeno(ver 2.1.4)にて走っています。 rate limit code import { Redis } from "https://esm.sh/@upstash/redis"; import type { MiddlewareHandler } from "hono"; export const rateLimit = ( requests: number = 100, window: number = 60 ): MiddlewareHandler => { const redis = new Redis({ url: Deno.env.get("UPSTASH_REDIS_REST_URL") ?? "", token: Deno.env.get("UPSTASH_REDIS_REST_TOKEN") ?? "", }); return async (c, next) => { try { const ip = c.req.header("x-forwarded-for") || "unknown"; const key = `rate-limit:${ip}`; if ( !...
Linux デスクトップを使い始めてから４年目もそろそろ終わり Windows からシフトしてどのような満足した点や不満があったかを書いて行きたいと思います。 Windows から移行理由 2018 年ごろは Cygwin と Windows のデフォルトのターミナルを使用していました。 2019 年秋ごろになり WSL をインストールして試していきました。というのは大学で教授などが unix の man ページなどのアクセスや大学内の各生徒に与えられたサーバーにアクセスし課題を提出したりテストを走らせたりするためには私の環境では WSL か Cygwin のみで SSH してアクセスしたほうが楽だからです。その後 2020 年コロナがきてそこが Windows から Linux への一番の変換点でした。 コロナに入り Zoom などのビデオアプリを使い始めてからノートパソコンのファンが元気すぎるほど回り始め、ブラウザー,テキストエディタなどの同時に開いているとフリーズしてアプリがクラッシュするようになりました。 まあ Intel の第６世代モバイル CPU を使ってたからまあしゃあないかと思ったけどすぐに新しいパソコンを買うのももったいないと思いメモリのスロットが幸運にも一つ空いていたので 16GBDDR4 のメモリを買って入れてみたらアプリは落ちなくなりました。だたファンはまだうるさくそこからもっと何かできないかと思いいろいろと調べてみたら Linux(GNU/Linux)の記事などに出くわし次第に興味を持って行くようになっていきました。 まずは VM に Ubuntu の iso をいれて試してみたところアプリの立ち上がりの速さにかなりおどろきました。VM のリソース(cpu、メモリ数)などもたいして与えたわけでもなかったのでもう普通に使えるんじゃないかと感じました。 そこでデストリビューション(distribution)やパッケージマネージャー、デスクトップ環境などを知り学びいくつか試しました。Linux mint(cinnamon, mate, xcfe), PopOS, Manjaro(KDE)などを VM 上で動かしてみてきめたところ Mint の mate デスクトップに決めました。cinnamon にしようかと思いましたが古い端末なので mate にしました（現在は cinnamon を使用しています）。そのあとは、ISO を USB にいれてデュアルブートをして Mint を使用して行く形になりました(その後別の SSD を買い完全に linux と Windows 用途に変えました)。...
Very simple example to convert React server component(RSC) from Client component. lets look at this code. the export async function addTodo(title: string) { await db.insert(todoTable).values({ title }); revalidatePath("/"); } TodoForm.tsx "use client"; import { useState } from "react"; import { addTodo } from "../server/queries"; export default function TodoForm() { const [title, setTitle] = useState(""); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (title.trim()) { await addTodo(title); setTitle(""); } }; return ( <form onSubmit={handleSubmit} className="flex space-x-2"> <input type="text" value={title} onChange={(e) => setTitle(e....
It has a little bit of new changes on how you access params on server side code(client as well) on Next.js 15. export default async function MediaPage({ params, }: { params: { fileId: string; }; // you could destructure params like this //assume it has path looks like /something/[fileId]/page.tsx const fileId = params.fileId; However, it is giving me a warning something like this Server Error: Route “/galleries/[fileId]” used params.fileId. params should be awaited before using its properties....
いろいろな DNS サービスがある中なんで NextDNS なのか。４年ほど前からずっと使っていて家族の端末にもアカウントを作ってあげ、みんな大好きuBlock Origin と一緒にセットアップしてあげるほど。多くの DNS サービス、Google, Cloudflare, Quad9, AdGuard DNS, ControlD などたくさんあるが NextDNS が今の所ディフォルトで使っています。 なんで NextDNS なのか？ フィルターの設定のかんたんさ、複数のプロファイルの作成可能、Allowlist/DenyList の設定、 オープンソースソフトウェアなどなどの理由からです。 フィルターの設定のかんたん!!! Privacy タブの Blocklists より設定できます。 おすすめのフィルターはこちらの２つ。 HaGeZi -Multi PRO OISD こちらの記事におすすめしてあるやつです。https://github.com/yokoffing/NextDNS-Config?tab=readme-ov-file#which-blocklist-should-i-use また、家族やあまりあるサイトにアクセスしようとしてブロックされた場合にどうしたらいいかわからない人には HaGeZi - Multi NORMAL などをおすすめします。ルーターレベルでのもおすすめです。日本語のフィルターも検索するとでてくるがかなり更新されてないため, もし必要なら uBlock origin や AdGuard などのクライエント側ですることをおすすめします。 複数のプロファイルの作成可能 複数のプロファイルの作成可能です。たとえばスマホ、ノートパソコン、ルーターなどで使い分けることができます。使い分けることによってアナリティクスやログのタブよりその端末で行った通信が見れることが可能です。またルーターで設定できるすることによって端末にて設定していないゲストの端末,スマートホーム端末も DNS 暗号化されて便利です。更にフィルターをプロファイルごとに変えて例えば、HaGeZi -Multi PRO はスマホ、PC で使い、ルーターでは HaGeZi - Multi NORMAL を使用するなども可能です。 Allowlist/DenyList もしブロックリストにのっていない URL などを可能もしくは拒否したい場合に加えることが可能です。例えば、*.firefox.settings.services.mozilla.com を私は拒否リストに加えています。また可能リストには*.sentry.io があります。これは Sentry のドキュメントを見たいですが sentry.io は多くのブロックリストに加わえてあるみたいなので意図的に許可しています。ただ sentry.io 自体はものすごいいろいろな値を見ることができるアナリティクスツールなので開発しないひとは許可リストにくわえなくていいと思います。...
OS, Kernel version OS: Linux Mint virginia 21.3 x86_64 Kernel: 5.15.0-119-generic linux mint にてシステムアップデートをしようとした所、e2fsprogs というパッケージがアップデートに失敗していました。 いかのようなメッセージが出ました。 sudo apt upgrade Reading package lists... Done Building dependency tree... Done Reading state information... Done Calculating upgrade... Done The following packages will be upgraded: comerr-dev e2fsprogs libcom-err2 libcom-err2:i386 libext2fs2 libss2 logsave 7 upgraded, 0 newly installed, 0 to remove and 0 not upgraded. 1 not fully installed or removed. Need to get 0 B/881 kB of archives....
intro I have tried to use Next.js Parallel route for modal showing up card component, but keep not showing up and and having a hard time @modal is intercepting route that i was not intended. problem This is the folder structure on next.js project. src │ ├── app │ │ ├── api │ │ │ ├── endemic_life │ │ │ │ └── route.ts │ │ │ ├── monsters │ │ │ │ ├── [monsterId] │ │ │ │ │ └── route....
While I was using “use server” in Next.js, I have encountered keyword “server-only’. I want to dig into this more. “user server” Since Next,js introduced Server Actions, you need to specify that components that are only rendered on server, never on client side code. “use server” on the top of the file. When it was introduced, people were making a meme why they are calling SQL query call inside React Component....