Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
Next.js って App Router が出てきて平和じゃなくなったよね
背景 Next.js に App Router が導入されてから1年近くが経ちました。しかし、未だに App Router を前提として設計のベストプラクティスが定まっておらず、身近なフロントエンドエンジニアはみな「まだプロダクトに取り入れるには考えることが多いよね」という共通認識のまま止まっているような気がしています。 また、App Router が導入されるまでは、技術選定の無難な選択肢として Next.js が最有力でした。しかし、現在は App Router の設計のプラクティスが未発達なことや、オーバースペックであるという見方が出てきており、検討しなければならないことが多くなったように感じます。 そうした中で、ではその懸念というのはどのようなものがあり、導入しずらい要因に何があるのか、というところが、今回執筆を行う上での背景になります。 App Router導入で考えないといけな
PathtraqというLifeLogサービスを作った - たごもりすメモ
最近何をやっていたかというと、タイトルの通り、Pathtraqというサービス、iPhoneアプリを作っていた。どんなサービスかと聞かれるとLifeLogというのが一番適切だと思うけど、LifeLogにも種類があって、これは位置情報を記録して検索するサービスになる。 https://pathtraq.tagomor.is/ PathtraqApp Satoshi TagomoriProductivityFreeapps.apple.com どういうためのものかというと、普段生活したりどこかに行ったりして、以下のようなことが気になる方向けです。 この場所/店/街、最後に来たのいつだっけ? 前に飲みにいってふらっと入ったあの店、どこにあった何ていう店だっけ? 前にあそこからあっちに移動したとき、どのくらい時間かかったっけ? なんかさあ、この程度のこと、全部記録とってあれば簡単にわかるはずなんだけ
一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog
このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2
Phoenix | Phoenix
A lightweight macOS window and app manager scriptable with JavaScript. You can also easily use languages which compile to JavaScript such as TypeScript. Phoenix aims for efficiency and a very small footprint. If you like the idea of scripting your own window or app management toolkit with JavaScript, Phoenix is probably going to give you the things you want. With Phoenix you can bind keyboard shor
PPR - pre-rendering新時代の到来とSSR/SSG論争の終焉
本稿はNext.js v15.0.0-rc.0時点の情報を元に執筆しており、PPRはさらにexperimentalな機能です。v15.0.0のリリース時や、PPRがstableな機能として提供される際には機能の一部が変更されてる可能性がありますので、ご注意下さい。 Partial Pre-Rendering(以降PPR)はNext.js v14.0で発表された、SSRやSSGにならぶ新たなレンダリングモデルです。 PPRは前述の通り開発中の機能で、v15のRC版にてexperimentalフラグを有効にすることで利用することができます。ppr: trueとすれば全部のページが対象となり、ppr: "incremental"とすればexport const experimental_ppr = trueを設定したRouteのみがPPRの対象となります。 // next.config.mjs
AppRouter Panel Talk
東京Node学園 42時限目の App Router Panel Talkです。
Slackで動くChatGPTのチャットボットをGoogle Apps Script（GAS）でサクッと作ってみる
Slackで動くChatGPTのチャットボットを作りたい 本記事では、Slackで下記仕様を実現できるChatGPTのチャットボットをGoogle Apps Script（GAS）でサクッと作成していきます。 botが所属するSlackのチャンネル内でメンションされると、スレッドで返信する botとのダイレクトメッセージの場合は、メンション無しでもスレッドで返信する botが参加しているスレッド内でのメッセージには、メンション無しでも（スレッド内の会話内容を読み取った上で）返信する また、下記項目も自由に設定することができます。何でも明るく回答してくれる社内のアイドル的なbotを作ってみるのも良いかもしれません。 botのアイコン、振る舞い（人格・役割など）の設定 gpt-3.5-turboやgpt-3.5-turbo-16kなどのGPTモデル設定 今回のbotは、非エンジニアの方でも作成
PCの操作をすべて録画＆文字起こしして過去の操作を丸ごと検索可能にするアプリ「Windrecorder」
PCを使っていると、過去の操作内容やブラウザで閲覧していた情報を思い出したくなるタイミングが頻繁に発生します。そんな時に役立ちそうなPC操作記録アプリ「Windrecorder」がオープンソースで開発されています。 GitHub - yuka-friends/Windrecorder: Windrecorder is a memory search app by records everything on your screen in small size, to let you rewind what you have seen, query through OCR text or image description, and get activity statistics. https://github.com/yuka-friends/Windrecorder I made an o
App Router移行時に0.01%の確率でCSR遷移が404エラーになる - とろろこんぶろぐ
概要 Pages Router から App Router 移行時に一部既存の画面での CSR 遷移が 404 エラーになりました。 この件について調査したので、記事にしてまとめておきます。 前提 今回発生したバグの内容の再現環境の特徴として、以下が挙げられます。 Next v13.5.6 Base path の設定あり App Router と Pages Router が共存している Base Path について Base Path の設定は next.config.js に以下のような記載があると、 module.exports = { basePath: '/base', } /pages/examples.tsx で配置したページコンポーネントが、 URL /base/examples で閲覧できるようになるものです。 また以下のような Link コンポーネントは、自動的に Ne
おもちゃ箱のようなアプリBaaaaのUI/UXが凄すぎた件｜Yusui Hoshino
【はじめに】この記事はBaaaaと何の関係もないただの学生（25卒）が執筆しています。 【Baaaaとは】カメラで現実世界を写すことで絵文字が生成され、それをコレクションしたり、レコードに載せて音楽を奏でられるアプリ。他の人のレコードを回したりスクラッチしたりとSNS的な側面も持つ。 日本企業のwedが制作しており、同社はONEというレシート買取サービスも開発している。 【感動した5ポイント】1.UIのサイズが激しく変化する下部にあるフッターナビゲーションの大きくサイズが変化するボタンを見て欲しい。選択されている場所を色、サイズ、テキストで強調できており、分かりやすい。また、指からはみ出すアニメーションはダイナミックでワクワクする。 フッターナビゲーションそして、一体感がすごい。フッターナビゲーションを左右にスワイプすることによって、指、ボタン、中央画面が全て同じ方向に動く。まるで指で引っ
これは“AIキャバクラ”なのか!? おしゃべりAI「Cotomo」と話したら“重い彼女”がいる気分に
友達と電話するように会話しながら、ほめたり労ったりしてくれるコトモ。「すごい！」「賢い」「頑張っているんだね」……言われて悪い気はしない。 だが「初対面で何でそこまで？」と白々しくも感じるし、会話はまったく深まらない。キャバクラの会話ってこんな感じなのかも？ 行ったことないけど……。 ただ、その技術はすごい。会話のテンポは人間と見まごう（聞きまごう？）ほどだ。こちらの言葉をオウム返ししたり、「うん」「そっかそっか」などの相づちを違和感なく挟むことで、より共感してもらっている印象を覚えるとともに、返答の待ち時間も自然に埋めている。 過去の会話を覚え、その後に反映してくる“記憶力”もある。前回の会話で「好き」と言ったことを思い出して、「○○好きだって言ってたよね？」と話を広げようとしてくるのだ。 あまりにナチュラルだから、人間と話している気持ちになる。だからこそ、ちょっとした“人間との違い”が
雑にReactアプリを作りたい時に使ってるもの
import "./App.css"; import { Link, Route, Switch } from "wouter"; function Nav() { return ( <nav> <Link to="/">Home</Link> <br /> <Link to="/about">About</Link> </nav> ); } function Home() { return ( <div className="App"> <h2>Home</h2> <Nav /> </div> ); } function About() { return ( <div className="App"> <h2>About</h2> <Nav /> </div> ); } function App() { return ( <> <Switch> <Route path="/" compo
HonoXについて
2月9日、予告していた通りHono v4をリリースしました。 そのHono v4のリリースと同時に、Honoを使ったメタフレームワーク「HonoX」を公開しました。 今回はHonoXのいくつかの特徴について書いてみたいと思います。これは使い方というより作者目線の思想みたいなものです。 メタフレームワーク HonoXとは一言で言うと「HonoとViteを組み合わせたメタフレームワーク」です。HonoX自体が機能を提供しないのが肝です。 もう少しだけ具体的に言います。HonoXで扱うのは「Honoのインスタンス」そのものです。つまりあなたがHonoXでアプリを作るということは「Honoのアプリを作る」ことになります。その証拠にエントリーポイントになるapp/server.ts内で出てくるappはHonoのインスタンスなので、hono/devにあるヘルパー関数showRoutes()がそのまま使
You Don't Need Next.js | ドクセル
[beta] Next.jsクイズ2 • <p>にはなにが表示されるでしょうか？ /app/page.tsx "use client"; import { useCallback, useEffect, useState } from "react"; export default function Home() { const [date, setDate] = useState(); const fetchDate = useCallback(async () => { const response = await fetch("/api"); const data = await response.json(); setDate(data.date); }, []); useEffect(() => { fetchDate(); }, [fetchDate]); return ( <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AWS、開発スキルがなくても生成AIへのプロンプトで業務アプリが作れる「AWS App Studio」プレビュー公開
Screen Studio — Professional screen recorder for macOS
GitHub - seratch/ChatGPT-in-Slack: Swift demonstration of how to build a Slack app that enables end-users to interact with a ChatGPT bot
【AI駆動開発】ついに全自動でアプリ開発に成功！GPT Engineerの威力そしてChatGPTの真価とは #ChatGPT #プログラミング #AI-Driven-Development - クリエーションライン株式会社
iOS App Veröffentlichung
