サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
あの日見たパターンの名前を僕たちはまだ知らない. よくある一覧 + 詳細画面を作りたい 例えば TODO アプリで, /todo にアクセスしたらタスクの一覧を, /todo/42 にアクセスしたら一覧は表示したまま ID = 42 のタスクの詳細を表示する, というよくあるパターンの画面を作りたい. 世の中の実例としては Asana や, URL の形は異なりますがGitHub の Projects なんかがこういう感じですね. /todo で一覧, /todo/42 で一覧 + 詳細技術的には要するに SPA なのでやればできるはずなんですが, これをNext.js (App Router) 上で作るにはどうしたら良いかという話をします. 素朴な実装は微妙Next.js はファイルシステムベースのルーティングを行います. ということで最も素朴には以下のようにファイルを配置すれば
ダイカストマシンが製品を作ってる間、2〜3分くらい待つ時間があるんですよ。製造現場にいると、この「サイクルタイム」っていう隙間時間が1日に何回も訪れます。 普通、この時間って何もできないんです。機械が止まるのを待つだけ。 でも、Cursorを使い始めてから、この隙間時間が開発時間になりました。 サイクルタイムの隙間にPCを開く → Cursorに「この関数を実装して」って指示を入力 → 機械が止まる → 製品を取り出して、次の作業 → また隙間時間 →PCを開くと、コードができてる。 これを2ヶ月間繰り返して、Next.jsでダッシュボードを作りました。 この記事では、小規模製造業でゼロからダッシュボードを作った話を、技術選定から失敗談、Cursor活用まで、正直に書きます。 なぜNext.jsを選んだのか 最初、素のReactも検討したんです。 でも、Next.jsを選んだ理由は単純で
この記事は、NTT Communications Advent Calendar 2024 13 日目の記事です。フロントエンドのインフラ構成を見直すことで運用コストを 99%削減できた事例についてご紹介します。 目次 目次 はじめに 見直しの背景 これまでの環境 課題 実現方法 工夫した点 動的コンテンツを表示させる 設定の自動化 変更後の効果 おわりに はじめに こんにちは、NeWork 開発チームの栄です。 普段はオンラインワークスペースサービス NeWork の開発エンジニアをしています。 この記事では、これまで NeWork で利用していたフロントエンドのインフラ構成を見直した結果、運用コストを 99%削減できた事例をご紹介します。 見直しの背景 これまでの環境 NeWork のサービス基盤はGoogle Cloud 上で提供しており、フロントエンドはGoogle App
グローバルなレストラン予約サービス、AutoReserveの開発をしているjavascripterです。 今回は、ハローでのautoreserve.comのアーキテクチャの変遷についてお話しします。 概要 AutoReserveは最初Next.jsで構築され、その後SPAに移行し、最終的に再びNext.jsに戻るという珍しい技術選択をしています。 この記事では、各アーキテクチャの移行の背景と、大規模アプリケーションの段階的移行の実践について解説します。 AutoReserveについて AutoReserveは世界中のレストランの予約が可能なグローバルサービスです。iOS・Android・Webの3プラットフォームで展開しており、各アプリ100ページ近くある大規模なアプリケーションです。 モバイルアプリはReact Native (Expo)で開発しており、当初のWeb版はNext.jsで構
はじめに こんにちは！株式会社マチス教育システムのいけふくろうです。 実務で商品管理画面を実装する機会があり、その際に得た知見をもとに、設計・実装プロセスや留意点について紹介させていただきます！！ フェーズ1の完成品 コスト（人的、予算）及びスケジュールの兼ね合いから、最低限のスコープでミニマムに設計・実装をおこなったため、至らない点は多々ありますが、作ったアプリケーションはこちらです💁 機能一覧 アカウント管理 ユーザーの管理機能とロール設定機能 テナント管理 各オーナーに対して複数のテナントを紐づけ、オーナーごとにテナントを一元管理できる機能 商品管理 商品情報の基本機能として、カテゴリー、商品基本情報、属性情報、商品画像の管理機能 ※商品基幹システムとの連携部分は未実装、ユーザー向けの注文サイト連携部分は未実装であることからJANコード管理などの機能は含めていない 在庫管理 主力商
Request Header で Next-Action を送信してるcurl で再現するとこんな感じの POST 通信curl 'https://nextclicker.nanabit.dev/' \ -H 'Content-Type:text/plain;charset=UTF-8' \ -H 'Cookie: ...' \ -H 'Next-Action: 6eb8416051487420c0347306825a392adf55f29e' \ --data-raw '[1]' 手動でリクエストを試してみる --data-raw '[9999]' の数値をいじると、 1 クリックで上がる 数値を変更可能なことが分かったcurl 'https://nextclicker.nanabit.dev/' \ -H 'Content-Type:text/plain;charset=UT
こんにちは。 Findy Toolsの開発をしている林です。 私たちのプロジェクトではフロントエンドのフレームワークにNext.js App Routerを使っており、AWSのECSへデプロイして運用しています。 そして、一部のレンダリングの処理が重いページのキャッシュを実装する際に、直面した課題と解決策を紹介します。Next.jsのキャッシュ機構について 今回実現したいこと 課題と解決策 課題1:Next.jsの機能では要件に合わない 解決策1: CloudFrontのみでキャッシュ 課題2: エラーページがキャッシュされる 解決策2:Lambda@Edgeを用いたCache-Controlヘッダー制御 まとめNext.jsのキャッシュ機構について まず、Next.jsのキャッシュ機構について簡単に説明します。Next.jsではサーバサイドで使えるキャッシュ機構が次の3種類あり
Next.jsとは ソースファイル インストール フォルダ・ファイル構成 App Router と Pages Router 基本ファイル ページ(page.tsx) レイアウト(layout.tsx) テンプレート(template.tsx) ローディング(loading.tsx) Not Foundページ(not-found.tsx) エラーページ(error.tsx) グローバルエラー(global-error.tsx) スタイリングCSSモジュールTailwindCSS Sass フォルダ名 プライベートフォルダ(_xxx) ルートグループ((xxx)) ダイナミックルーティング([xxx]) ダイナミックルーティング：階層化([...xxx]) ダイナミックルーティング：パラメータ無し対応([[...xxx]]) ダイナミックルーティング：複数パラメータ([xxx]/[yy
このサイトで使っているNext.jsをv15にアップデートしました。 所詮ブログサイトなのでほとんど大きな変更はないですが、変更した内容を残しておきます。 内容パッケージのアップデート使っているNext.js関連のパッケージを一気にアップデートします。 npm i next@latestreact@rcreact-dom@rc @types/react@latest @types/react-dom@latest @next/bundle-analyzer@latest @next/third-parties@latest 注意点は、Next.js自体はv15が正式リリースされていますが、React v19はまだRC版です。なのでインストール時は @rc をつけてインストールします。 Async RequestAPIsNext.js 15からpage.tsxやlayout.tsxのp
No results found. Try a different search term, or use our global search.
こんにちは。 めろたんです。 最近は咳としゃっくりが同時に出るようになってしまってとてもしんどいです。 はい。 今回は、弊社のサービスである、リーナー見積のフロントエンドをVueからReactに乗り換えた話について書いていこうと思います。 まず前提 リーナー見積では、フロントエンドは３つのサービスに分かれており 買い手向け画面 売り手向け画面 リーナー運営向け画面 という構成になっております。 サービスの構成図 各々Nuxt.jsで作られており、その全てでSEOや初期ページローディングのパフォーマンスをすごく求められるものではないため、CSRで行うように構成していました。 また作り始めた当時、会社やプロダクトがアーリーフェイズであり、そもそもプロダクトがこれで行けるかどうかというのもあったため、何を使って作るかというのは深く考えず、後に作り直すだろうというのを前提でNuxt.jsを選定して
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。TailwindCSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwindCSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
はじめに この記事について こんにちは、 @zomysan（Twitter） です。この記事では、Next.js で開発をしているWebアプリケーションのフロントエンドを対象に、開発途中のページをどう扱うかということについて書きます。 新しい機能やリニューアルのための開発を始めてあたらしいページを追加したものの、まだ途中なのでユーザーに見せられる状態ではない、ということはよくあると思います。ユーザーには見せたくないけど、開発環境やステージング環境では確認したい。でも本番環境には出したくない。そういうときどうしたら良いのでしょうか？ この記事の対象 この記事は以下のような人を対象としています。Next.js で Web アプリケーションを実装している 開発中のページを本番環境に露出したくない まとめ 今回、私は以下のように実現してみました。 開発中のページについて、拡張子を .page.d
![[Next.js] 開発中のページを開発環境でのみ表示し、本番環境のビルドには含めないようにする](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f8936786543ce5934ebbc3c8138bd1c9ca40bc4ae%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fres.cloudinary.com%252Fzenn%252Fimage%252Fupload%252Fs--WkL-5h-l--%252Fc_fit%25252Cg_north_west%25252Cl_text%253Anotosansjp-medium.otf_55%253A%2525255BNext.js%2525255D%25252520%252525E9%25252596%2525258B%252525E7%25252599%252525BA%252525E4%252525B8%252525AD%252525E3%25252581%252525AE%252525E3%25252583%2525259A%252525E3%25252583%252525BC%252525E3%25252582%252525B8%252525E3%25252582%25252592%252525E9%25252596%2525258B%252525E7%25252599%252525BA%252525E7%25252592%252525B0%252525E5%252525A2%25252583%252525E3%25252581%252525A7%252525E3%25252581%252525AE%252525E3%25252581%252525BF%252525E8%252525A1%252525A8%252525E7%252525A4%252525BA%252525E3%25252581%25252597%252525E3%25252580%25252581%252525E6%2525259C%252525AC%252525E7%25252595%252525AA%252525E7%25252592%252525B0%252525E5%252525A2%25252583%252525E3%25252581%252525AE%252525E3%25252583%25252593%252525E3%25252583%252525AB%252525E3%25252583%25252589%252525E3%25252581%252525AB%252525E3%25252581%252525AF%252525E5%25252590%252525AB%252525E3%25252582%25252581%252525E3%25252581%252525AA%252525E3%25252581%25252584%252525E3%25252582%25252588%252525E3%25252581%25252586%252525E3%25252581%252525AB%252525E3%25252581%25252599%252525E3%25252582%2525258B%25252Cw_1010%25252Cx_90%25252Cy_100%252Fg_south_west%25252Cl_text%253Anotosansjp-medium.otf_34%253Azomysan%25252Cx_220%25252Cy_108%252Fbo_3px_solid_rgb%253Ad6e3ed%25252Cg_south_west%25252Ch_90%25252Cl_fetch%253AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2I4Mjg2YmNjMDEuanBlZw%253D%253D%25252Cr_20%25252Cw_90%25252Cx_92%25252Cy_102%252Fco_rgb%253A6e7b85%25252Cg_south_west%25252Cl_text%253Anotosansjp-medium.otf_30%253ASocial%25252520PLUS%25252520Tech%25252520Blog%25252Cx_220%25252Cy_160%252Fbo_4px_solid_white%25252Cg_south_west%25252Ch_50%25252Cl_fetch%253AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzUxYTI1OGI3MTQuanBlZw%253D%253D%25252Cr_max%25252Cw_50%25252Cx_139%25252Cy_84%252Fv1627283836%252Fdefault%252Fog-base-w1200-v2.png&f=jpg&w=240)
Next.js Web フレームワークをインストールし、Windows で稼働させるためのガイドです。Next.js は、React ベースの Web アプリケーションをビルドするために調整されたJavaScript フレームワークであり、静的レンダリングとサーバー側レンダリングの両方の Web アプリケーションのサポートを提供します。 ベスト プラクティスを念頭に置いてビルドされたNext.js を使用することで、"ユニバーサル" な Web アプリを一貫した方法で作成でき、構成は最小限で済みます。 これらの "ユニバーサル" なサーバー側レンダリングの Web アプリは、"アイソモーフィック" とも呼ばれ、クライアントとサーバーの間でコードを共有します。Next.js を使用することで、開発者は、高速かつスケーラブルでSEO に対応しやすい Web アプリケーションを簡単に作
OpenStatus - ステータスページ App Router Turborepo Drizzle Clerk tRPCTailwind shadcn/ui LLMReport -OpenAI モニタリング App Router PrismaNextAuth shadcn/uiStripe Dub - URL 短縮 App Router Turborepo PrismaNextAuthTailwindStripe slug - URL 短縮 PrismaNextAuth tRPCTailwind Cal.com - 日程調整 Turborepo PrismaNextAuth tRPCTailwind Taxonomy - ブログ App Router PrismaNextAuthTailwind Rowy - ローコードGUI Firebase Dorf -
使用するライブラリ このアプリで、Next.js以外に使用するライブラリは以下の4つです。インストール方法等は必要な箇所で説明します。 PrismaTypeScriptのORマッパーです。アプリでのノートの保存等に使用します。 ▶ Prisma | Next-generationORM for Node.js &TypeScriptTailwindCSSCSSフレームワークです。アプリのUIデザインに使用します。 ▶TailwindCSS - Rapidlybuild modern websites without ever leaving yourHTML.Zod バリデーションライブラリです。APIレスポンスの型定義とバリデーションに使用します。 ▶Zod | Documentation SWR データフェッチ用のライブラリです。ノート一覧のクライアントサイドで
Next.jsアプリケーションの開発時においてコンパイルが長時間に及ぶ問題が起きていたので、その原因を特定した手法と採用した解決策について記載します。 今回は結果的にコンパイル時間を100倍以上高速化することができました。 前提 今回の対応は以下のバージョンで行いました。React@18.2.0 next@12.2.4tailwindcss@3.2.4 postcss@8.4.14Next.js の開発中に、コンパイル時間が長くなっていることに気づく 最近、Next.jsアプリケーションのローカル開発時に待ち時間が長くて生産性が低いのでなんとかしたい、という相談を受け、調査を開始しました。 まず、おもむろにyarn devでプロセスを立ち上げてみたところ、以下のようなコンパイル時間を示すログが表示されました。 yarn dev yarn run v1.22.19 $ next dev
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
