mkcertを利用してローカルのNext.js開発環境にHTTPSアクセスができるようにしてみた | DevelopersIO
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 Next.jsのアプリケーション開発をしている際に、HTTPSでアクセスしたいことはないでしょうか？私はあります。 ということで、mkcertを利用してローカルのNext.js開発環境にHTTPSアクセスができるようにしてみました。 前提 OS環境としては、MacOSで検証を行っています。 mkcert について mkcertはローカル開発環境に信頼された証明書を作成できるツールです。 今回はこちらを利用して証明書を発行してみます。 インストール インストールはMacOSの場合brewコマンドで簡単にインストールすることができます。なお、MacOS以外についてもREADMEにインストール方法が記載されています。 % brew install mkcert ==> Fetching mkcert ==>
Next.js 10
We are excited to introduce Next.js 10, featuring: Built-in Image Component and Automatic Image Optimization: Automatically optimize images using the new next/image component Internationalized Routing: Start internationalizing your Next.js applications with built-in primitives Next.js Analytics: Measure and act on real user performance Next.js Commerce: An all-in-one starter kit for high-performan
はじめに 今回の記事では、学習・開発でTypeScriptを使ううえで絶対に確認するべきGitHubリポジトリ、サイトや書籍を33も紹介する。TypeScriptで生計を立てているプログラマーはもちろん、これからTypeScriptを学習するプログラマーはぜひ確認しておきたい。 GitHubリポジトリ awesome-typescript TypeScriptの学習・開発に役立つツール、サイトや書籍を一つにまとめているGitHubリポジトリ。TypeScriptを使っているプログラマーは全員確認するべき。 awesome-react Reactの学習・開発に役立つツール、サイトや書籍を一つにまとめているGitHubリポジトリ。 awesome-vue Vueの学習・開発に役立つツール、サイトや書籍を一つにまとめているGitHubリポジトリ。 awesome-nextjs Next.jsの学
Next.jsに専用のESLintが追加された！
Next.js11がついに発表されましたね。 next/script、Next.js Liveなど、興味深い機能が色々ですが、自分が地味に嬉しかったのはNext.js専用のESLint設定がデフォルトでサポートされたことです。 create-next-appでESLint設定済みのNext.jsプロジェクトが作成できる ReactやNext.jsのプロジェクトを立ち上げる際、結構面倒くさい難しいのがESLintの設定です。 .eslintrcファイルの記述とか、extendsの記述順によって優先されるルールとかも変わってくるので、慣れないうちはなかなか難しい作業でしょう。（自分はいまだに試行錯誤してます…） しかし、今ではcreate-next-appを使うと、専用のESLintが設定済みのNext.jsプロジェクトを作成してくれます。 実際にコマンドを実行した結果を見ていきましょう。 $
Next.jsでSSRF（=Server Side Request Forgery）の脆弱性が発覚したことが社内で話題になったので、まとめておこうと思います。対象の脆弱性は以下です。 脆弱性の概要 SSRF脆弱性は本来到達できないサーバーに対して、公開されてるサーバーを経由してアクセスすることができてしまう脆弱性です。 今回のNext.jsの脆弱性はhttpヘッダーのHostを書き換えることで、self hostingなNext.jsサーバーから任意のhttpリクエストを送信できてしまうというものです。これは、外部には公開してない内部APIに対するリクエストも可能になるため、SSRF攻撃になりえます。 今回の脆弱性の対象は、以下の条件を満たしている必要があります。 Next.jsをself hostingで運用している Next.jsアプリケーションがServer Actionsを利用して
ブログを作りながら学ぶ、Next.jsの便利な5つのコンポーネント（Link、Image、Head、Script、レイアウト）
この連載では、現在注目のWebホスティングサービス「Vercel」をご紹介します。本記事から2回にわたって、「Next.js」の便利な9つの機能をご紹介します。今回は、「Linkコンポーネント」「Imageコンポーネント」「Headコンポーネント」「Scriptコンポーネント」「レイアウトコンポーネント」の5つのコンポーネントを紹介します。 はじめに 前回はNext.jsアプリケーションをVercelにデプロイする方法や、一緒に活用する利点などを紹介しました。今回から2回にわたって、Next.jsの便利な機能を紹介しながら、簡単なブログを表示するアプリを作成していきます。 この記事は既になんらかのプログラミング言語やWebフレームワークを学習した経験がある人向けに書いています。サンプルコードを提供しますので、サンプルコードを実際に動かしていただくことでより理解が深まると考えています。 自身
This article is the first part of a course where we build a fullstack app with Next.js, GraphQL, TypeScript,Prisma and PostgreSQL. In this article, we'll create the data model and explore the different components of Prisma.
変更ログ 21/09/04: 「ドメイン駆動設計について DroidKaigi 2017 で登壇しました。」のリンクを追加 -21/08/11: 書籍「the Jargon File」についてのリンクを追加 -21/08/06: C, アセンブリ言語についてのリンクを追加 前書き プログラムを学ぶとき、良質役立ちそうなサイトを探すのにかなりの時間を浪費した。 他の人にはそうなってほしくないので、今まで役立ったサイトを公開する。 なお、強くオススメしたいサイト順に並ばせる。 随時更新予定。 21/08/06: 追記 (この記事はもともと大量のブックマークを処分し依存を絶つのが目的で作成しました。 しかし、ブックマークが便利すぎるので結局依存は断てず、この記事を自分で使うこともほぼなかったため、更新は未定に変更します。) この記事を効率よく使う方法の例： ・リンクを実際に踏んでみて、ざっと吟味
TestingIn React and Next.js, there are a few different types of tests you can write, each with its own purpose and use cases. This page provides an overview of types and commonly used tools you can use to test your application. Types of tests Unit testing involves testing individual units (or blocks of code) in isolation. In React, a unit can be a single function, hook, or component. Component tes
はじめまして、今年の 9 月に入社した井手です。 NIKKEI Advent Calendar 2021 17 日目を担当します。 今日は Web Bluetooth の仕様を Bluetooth の説明を交えながら解説し、Web Bluetooth を日経でどう使えそうかを考えてみます。 紙の新聞について 皆さんは紙の新聞を読みますか？私は読みます。日本経済新聞社の福利厚生の１つには日本経済新聞の購読費補助があり、私は日経 W プランを購読しています。 最近は紙の新聞に触れる度に、新聞が紙である意義を考えるようになりました。新聞には国民の知る権利を支える大切な役割がありますが、紙媒体にしか寄与できない側面があると思います。例えば紙媒体の新聞は朝刊・夕刊単体で購入でき、欲しい情報を安価に購入できます。また、スーパー銭湯や喫茶店といった場所に置いてある新聞を回し読むことで、購入せずとも情報に
【月間9000万PVのPR TIMES】プレスリリース掲載ページの Next.js 移行でやったこと | PR TIMES 開発者ブログ
こんにちは！PR TIMES 開発本部フロントエンドエンジニアの岩元 (@yoiwamoto) です。 先日、月間9000万 PV のプレスリリース配信サイト PR TIMES で、もっともアクセスが多い「プレスリリースページ」の実装を、PHP + Smarty + jQuery から Next.js に移行しました。 今回はこれについての詳細や難しかったことなどを共有します。 背景と目的 PR TIMES の Web アプリケーションのフロントエンドは、この数年、必要な部分から随時ページ単位で React 実装へのリプレイスが進んでいる状態で、まだ多くのページでバックエンド生成の HTML + jQuery の実装が残っています。 ご利用企業様のプレスリリースを掲載するプレスリリースページ（下スクリーンショット）もその一つで、機能追加や改修のニーズはありながら、大きな変更を行うことが難し
2021年1月現在、Next.jsでXMLサイトマップを生成するライブラリとしてはnextjs-sitemap-generatorが最も人気のようです。 nextjs-sitemap-generatorのドキュメントを軽く読む限り、Next.jsのCustom Serverを使用してビルド時にサイトマップを生成する仕組みのようなので、以下のようなケースでの使用には最適とは言えません。 Custom Serverは触りたくない コンテンツ追加のタイミングでビルドが走らないユーザー投稿型のサイトでも、サイトマップを一定間隔で更新したい 個人的に色々と試してみたところ、思った以上に簡単にXMLサイトマップを動的に作ることができたので、その方法を共有します。 Next.js + TypeScriptで動的にXML Sitemapを生成する 以下のような方針で実装します。 sitemap.xmlをN
How Google handles JavaScript throughout the indexing process – Vercel
Understanding how search engines crawl, render, and index web pages is crucial for optimizing sites for search engines. Over the years, as search engines like Google change their processes, it’s tough to keep track of what works and doesn’t—especially with client-side JavaScript. We’ve noticed that a number of old beliefs have stuck around and kept the community unsure about best practices for app
高校生がAI作品に特化した画像投稿サービス「Aivy」を個人開発した話 | SolidJS & Supabase & Cloudflare
こんにちは だだっこぱんだと言います。だだっこではないです。 今回は初めてしっかりした個人開発をしたので、技術的な部分についていろいろとお話しします。 つくったもの Aivy というAI作品に特化した画像投稿サイトを作りました🍃 👇よかったらこれ拡散してくれるとうれしいですの ScreenShot ホーム画面 投稿ページ ユーザーページ 検索 投稿管理 なにこれ AI作品に特化した画像投稿コミュニティサービスです。 ただ画像を投稿するだけでなく、プロンプトやモデル等のAI画像生成に使う情報を一緒に投稿できます。 この記事では この記事では技術面にフォーカスしてお話しします。 どうして作ったの？ とかその辺の話は下記リンクのNoteにまとめてありますので合わせてご覧ください。 開発体制 メンバー ぼく(高校生) 開発フロー 完成まではゴリゴリローカルでした。タスク分けとか何も管理しません
サーバレスでフルマネージドなGraphQLサービスGrafbaseを試してみた | DevelopersIO
はじめに こんにちは、CX事業本部Delivery部MADグループの森茂です。 Supabaseのように手軽にデータベースが使え、さらにGraphQLエンドポイントが利用できるGrafbaseというサービスのプライベートベータが開始されていたのでさっそく試してみました。 まだプライベートベータのためサービスの価格など全容は公開されていないのですが、サイトやブログからの情報では、GrafbaseはGraphqlのスキーマをデプロイするだけでDynamoDBとGraphQLのエンドポイントを構築してくれるBaaSのようです。プライベートベータのため招待制となっていますが、私が申請した7月27日現在では数分後には招待メールが届き利用できるようになりました。 下記ブログ記事によると、GrafbaseのプラットフォームはRustでつくられており、Cloudflare Workers上、つまりエッジに
Next.js の fetchCache を考える
Next.js App Router は global のfetch関数に patch をあてており、自動でデータ取得が最適化されるように設計されています。そのうちの一つが、取得したデータをキャッシュし、再利用する最適化です。キャッシュされた取得データは、必要に応じて任意のタイミングで Revalidate（データ再取得・キャッシュ更新）が可能です。本稿はこのfetch関数を経由してキャッシュされる「fetchCache」について、どのように向き合うべきか考察したメモです。 検証留意点 はじめに、筆者が検証にあたり留意した点を書いていきます。本稿を読んでみて「自分でも検証してみたい！」となった方は、参考にしていただければと思います。 【1】取得データがキャッシュされるタイミング タイミングは２通りあります。 ビルド時: next buildで Next.js アプリをビルドした時 リクエス
Tauri+Next.jsでモバイルアプリ開発
通称Tauri Mobileのアルファ版がリリースされたのでiOS/Androidアプリが開発できるようになった。(https://laiso.hatenablog.com/entry/tauri-on-mobile から半年) Tauriとは TauriはWeb技術でデスクトップアプリを構成するためのフレームワークで、Electronの代替ツール。アプリのUIをHTML+CSS+JavaScriptで開発し、その裏側のネイティブコードをRustで書いて呼び出すことができる。 TauriのアーキテクチャはシステムにあるWebViewを使ってHTML+CSS+JavaScriptを表示する。アプリ内にブラウザエンジンを含むアーキテクチャを取るElectronではApp StoreレギュレーションによりiOSアプリを開発できないので、Tauri MobileはiOS/Androidのネイティブ
Next.js App Router TrainingIntroducing various basic patterns of app router with simplified code.
Next.js と React-admin を使って簡単な管理画面を作成するチュートリアルをやってみた | DevelopersIO
Next.js 初心者が React-admin を使って管理画面作成に挑戦しています。今回は React-admin 公式ドキュメントにある、Next.js Integration のチュートリアルをやってみました。 はじめに こんにちは、筧(@TakaakiKakei)です。 最近、Next.js と React-admin を使って管理画面作成に挑戦しています。 今回は、React-admin の公式ドキュメントで用意されている、Next.js Integration のチュートリアルをやってみたので、その内容についてご紹介します。 React-admin - My First Project Tutorial 前提 予め、今回の出てくるキーワードについて概要をおさらいしましょう。 Next.js とは Next.js by Vercel - The React Framework
【AWS】Next.js+LaravelをECS+Fargateにデプロイする時のアレコレ | yutaro blog
最近業務でNext.js+LaravelのアプリケーションをAWSのAmazon ECS(Fargate)にデプロイするタスクを担当しているので、デプロイするにあたりNext.js側、Laravel側でやっておくこと、エラー対応などをまとめておく。 ECSへのデプロイはEC2へのデプロイに比べそもそもネットに情報が少ないECSの中でもデータプレーン（コンテナ実行環境）にEC2を使った記事が多くFargateを使った記事はかなり少ないECS+Fargateへのデプロイでも本記事のようなフロントエンド+APIの構成のデプロイ例はマジで少ない という状態で結構苦戦したので、自分で苦戦したことを残しておくとともに同じ構成でデプロイする方に向けて参考になれば嬉しいです。 ECS、ECR、Fargateについての技術説明・全体的なデプロイ作業の手順についてはこの記事では扱わないが、この記事（というかZ
はじめに みなさんこんにちは、物流業界の価値最大化をミッションに掲げ運送会社のDXに寄り添うアセンド株式会社でCTOを務めている丹羽です。 1日5.2回のリリースを実現するプロダクトチームの開発体験を支えるCIの高速化についてご紹介します（先週3/20週の平均値）。1日に数回デプロイというレベルでの素早く開発するにおいて、 push 時の CI Check の速さは地味ですが開発体験にとって見逃せない存在になります。特にモノレポ環境ではジョブが複数ある中でいかに省略ができるかが鍵となり、泥臭くも数十秒でも高速化のため戦ったポイントを紹介します。 アセンドでは顧客課題を中心にプロダクト開発をするためにフルサイクルエンジニアという開発スタイルを取り、１エンジニアがフロント・バックエンドだけでなく設計からリリース・サポートまでのソフトウェアのライフサイクル全体にオーナーシップを持って開発していま
Next.js 12.3
We've shipped some quality-of-life improvements to Next.js with 12.3: Improved Fast Refresh: .env, jsconfig.json, and tsconfig.json files now hot reload. TypeScript Auto-Install: Add a .ts file to automatically configure TypeScript and install deps. Image Component: next/future/image is now stable. SWC Minifier: Minification with the Next.js compiler is now stable. New Router + Layouts Update: Imp
追加の記事を作成しました。 ※ 混乱させるかもしれないので一応、ところどころamplifyって出てきますが、apiの作成にamplify使っているだけで、デプロイとかにはホスティングにはamplify使ってないので。わかりにくくてすみません。 ※現状では、bucketRegionを指定すると、エラーになってしまいます。 https://github.com/serverless-nextjs/serverless-next.js/issues/1111 解決済み serverless-next.jsでISRに対応したNext.jsをデプロイのサポートが！ついに！ つい先日こちらのプルリクがマージされてました。 まだα版ではありますが。 ということで、やってみました！ 結論躓くことなくうまくいきました！ Vercel使わずにも生きていけるかも！ 実際に試した構成 serverless-nex
フロントエンドのLinterやCIを改善した話
この記事は 株式会社エス・エム・エス Advent Calendar 2023 の21日目の記事です。 介護事業者向けの経営支援サービス「カイポケ」のリニューアルプロジェクトでフロントエンド開発をしている @hush_in です。 今年の4月にエス・エム・エスに入社しました。 入社してからフロントエンドのLinterやCIを改善した話をします。 忙しい人向けまとめ ESLint の recommended 系 extends を追加 全般 eslint:recommended plugin:import/recommended TypeScript plugin:@typescript-eslint/recommended-type-checked plugin:@typescript-eslint/stylistic-type-checked plugin:import/typescri
こんにちは、ファインディ株式会社でフロントエンドのリードをしております 新福(@puku0x)です。 この記事では、IT/Webエンジニアの転職・求人サイト Findyのメッセージ画面の改善についてご紹介します。 メッセージ画面の課題 メッセージ画面の改善 Apollo Clientキャッシュの利用 読み込み画面の条件修正 ページ設計の最適化 まとめ メッセージ画面の課題 Findyのメッセージ画面は数年前にデザインを刷新しました。 現在では、3種類のメッセージを表示するようになっています。 通常のマッチングのメッセージ プレミアムスカウトのメッセージ Findyからのメッセージ 機能拡充される一方で「読み込みが多い」「画面遷移がサクサク動くようにして欲しい」との声をいただく機会が増えていきました。 実際に触ってみると確かに読み込み画面が頻繁に表示され、画面遷移に時間がかかっていることがわ
Next.js 9.4
We are excited today to introduce Next.js 9.4, featuring: Fast Refresh: fast and reliable live-editing experience, as proven at Facebook scale Incremental Static Regeneration (beta): re-build static pages after you've deployed, in milliseconds CMS Examples: examples for Contentful, DatoCMS, Prismic, Sanity, and TakeShape using our new next-gen static site generation New Environment Variables Suppo
ファイルシステム API Routes の課題 Next.js のファイルシステムを利用した routing は、直感的に定義を追加することができます。一方、モジュールシステム観点からは透過的参照がないため、TypeScript の型推論と相性が悪いです。Next.js における型安全な routing ソリューションとして pathpida がありますが、API Routes には対応していません。 useSWR から API Routes の API を呼ぶシーンで期待に沿うものが見当たらなかったので、今回自作してみました（リポジトリはこちら）本サンプルでは、npm script のpostinstallを hook に、src/types/pages/apiに生成ファイルが出力されるので、あらかじめnpm installを実行してお試しください。 サンプルで実現している型推論概要 は
Next.jsとVercelの出口はどこにあるのか
# Next.jsとVercelの出口はどこにあるのか 趣味でも仕事でもガッツリNext.jsを使っているという方による『Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな』 という記事を読んで、技術的には色々なことが腹落ちした感があるものの、職業柄というか今働いているところとビジネス的にも近いというかっていう感じで、Vercelが今後どうなっていくのか？っていうのが気になってしまいました。 # VercelのEnterpriseプラン VercelのPricingページにいくと、2020年11月現在、ProとEnterpriseという形で分かれていて、Qiitaの記事によると『最低でも年間数万ドルと、個人開発者やベンチャー企業が手軽に支払える額ではありません。』とのことでした。 確かに、そんなにお安いものではないかもしれないのですが、例えば年間500万円と
Next.js breaking change - disable router/fetch cache by default
Next.js App Routerは巷では難しいと評されることが多々あります。これはReactの新機能であるServer ComponentsをはじめとするServer 1stとも言えるパラダイムシフトを必要とすること、そして初見殺しなデフォルトのキャッシュ挙動に起因していると筆者は考えています。 パラダイムシフトが必要となるServer ComponentsやServer ActionsなどのReactの新機能については、エラーで指摘・修正のヒントが提示されるなどの初学者のフォローもしっかり考慮した設計がなされてたり、多くのドキュメントや記事が公開されているので、これらについてはhooksが登場した時のようにあとは世の中に理解が広まるまでの時間の問題なのかなとも感じています。 一方でキャッシュについては、デフォルトで積極的かつ何層にも分けてキャッシュされる上、「意図せずキャッシュされて
Hanabi.REST AIにHonoJSのバックエンドを書かせて遊ぶ、Hanabi.RESTというサービスを一般公開します。それに際して、この記事では、Hanabiの紹介と簡単に技術スタックを解説していきます。 皆さんは、AIがプロンプトからUIを生成する、V0というサービスをご存じですか？僕はあれを見たときに、ある妄想が膨らみました。 「V0のAPI版があれば、プロンプトからWebアプリケーションを作れるやん！！」と。 当初はハッカソン用の小プロジェクトとして始めましたが、想定以上に面白い結果が得られたため、開発を継続することにしました。技術的な制約、様々な黒魔術による不安定な挙動、LLMの劣化など、数多くの壁を乗り越えながら、約半年をかけてようやくリリースに至りました！！ 次のリンクから実際にAIが生成したTwitter風のAPIを試すことが出来ます！ また、会員登録すれば誰でもAP
STORES 予約 開発チームの価値観・開発フロー・採用の特徴について考えてみました - STORES Tech Blog
2021 年 1 月、Coubic が hey に吸収合併される形で「STORES 予約」というプロダクトが hey の中にできました。 3 ヶ月(実際には昨年の 10 月から開発チームは hey オフィスで働いていたので 6 ヶ月)経った今、改めて今の予約チームの価値観や開発の進め方、採用の進め方についてお話してみます。 チームの価値観 まずは、チームの価値観について。 hey 全体の中で各チームはかなり違う毛色を持っており、EC では「わいわい」、決済では「オトナ」という単語が社内的にはよく使われています。 一方、僕ら予約のチームには「やんちゃ」という単語がよく使われています。 これはそれぞれのプロダクトが元々 STORES.jp, Coiney, Coubic と別々の会社であったことに起因している部分が大きいと考えています。hey として 1 つの会社になった後も、全体としての方向
以前、microCMS と Next.js でブログを作るというブログを書いたのですが、microCMS から公式の SDK が提供されていたので書き換えてみました。 前回と比べ、大きく異なる点は以下の 2 点になります。 microCMS JavaScript SDKを使うため、aspidaは未使用 Next.js のバージョンを 10 から 11 にアップデート ここではこれら変更点についてのみ扱います。それほど変わらない点については、前回の記事をご参照ください。microCMS の API はまったく同じものを使用しています。 完成したコードのリポジトリは下記になります。 https://github.com/hbsnow-sandbox/nextjs-micro-cms-sdk-example インストール まずは Next.js をインストールしましょう。TypeScript は
PR TIMESのトップページをNext.jsにリプレイスしました | PR TIMES 開発者ブログ
こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 プレスリリース掲載ページ、キーワード検索ページに続き、PR TIMESのトップページを PHP + Smarty + jQuery から Next.js（Pages Router）にリプレイスしました。
はじめに こんにちは。メルカリ ハロでSRE TLをしている@nakaです。連載：Mercari Hallo, world! -メルカリ ハロ 開発の裏側- の3回目を担当させていただきます。 この記事では、メルカリの新規事業立ち上げにおけるSREの働きや役割に関して、紹介します。 メルカリでは、Platform Engineeringが提供するツールや仕組みを活用して、サービスを立ち上げていきます。新規事業立ち上げのチームだけで、完結するわけではありません。今回は、Platform Engineering時代の新規サービス立ち上げにおけるSREの役割と具体的な動きを、メルカリ ハロを例に取り上げて紹介します。SREが、Platform Engineeringとプロダクト開発チームと一丸となって「All For One」に動いてきた取り組みが少しでも臨場感を持って伝えられればと思います。
8月1日、Vercel Newsで「Google がインデックス作成プロセスで JavaScript を処理する方法 – Vercel」と題した記事が公開された。この記事では、Googleがインデックス作成プロセスでJavaScriptをどのように処理しているかについて詳しく紹介されている。 以下に、その内容を簡潔にまとめて紹介する。 まず、Googleがインデックス作成プロセスでJavaScriptをどのように扱うかについて、以下の主要な誤解があることが指摘されている。 「GoogleはクライアントサイドのJavaScriptをレンダリングできない」 「GoogleはJavaScriptページを異なる扱いをする」 「レンダリングキューとタイミングがSEOに大きく影響する」 「JavaScriptを多用するサイトはページ発見が遅くなる」 これらの誤解を解消するため、VercelはSEOおよ
はじめに 今回はエンジニア向けのチートシートをまとめていきます。 チートシートを利用することで、 作業効率が上がる 大枠を掴める 学習になる といった恩恵が得られます。 ただし、毎回コードを書くたびに「チートシート集でカンニングすればええや」と思うのではなく、「チートシートを使う中で徐々に体で覚えていく」ことが重要です。 最終的にはチートシートは見ずに「自分の使える技術」として定着させるための道具だと思って使ってください。 この記事の対象者 エンジニア初心者 作業効率を上げたい人 コードを書くテクニックを知り合い人 VsCodeチートシート ChatGPTに関するチートシート プロンプト集がまとめられています。 Markdown記法 チートシート Markdownもエンジニアは必ず使うといっても過言ではないものなので、早めに習得することをおすすめします。 Qiita公式が出しているというこ
Docker Compose Watch, a tool to improve the inner loop of application development, is now generally available. Hot reload is one of those engineering workflow features that’s seemingly minor and simple but has cumulative benefits. If you can trust your app will update seamlessly as you code, without losing state, it’s one less thing pulling your focus from the work at hand. You can see your fronte
Caution Server Actions は 2023/05/06 現在 Alpha 版の機能です。この記事で紹介している内容は今後変更される可能性があります。 Next.js の Server Actions はクライアントサイドのフォームの送信やボタンクリックなどのイベントからサーバーサイドで実行される関数を呼び出せます。クライアント JavaScript の削減、プログレッシブエンハンスメントなフォームを実現します。 Server Actions をはじめる Server Actions を使うには、まず next.config.js に experimental: { serverActions: true } を追加します。この設定により、Next.js が React の実験的な機能である React Canary を使用するようになります。また、従来の pages ディレ
Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything realtime, and lets you focus on your code. Explore how it works
Next.js 10.1
We are excited to introduce Next.js 10.1, featuring: 3x Faster Refresh: 200ms faster refresh with no changes necessary. Improved Installation Time: 58% smaller install size and 56% fewer dependencies. next/image Improvements: Apple Silicon (M1) Support, plus more layout and loader options. Next.js Commerce Shopify Integration: Flexible data layer for composable e-commerce apps. Custom 500 Page: Ad
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【TypeScript】学習・開発で必ず確認するべきリポジトリ・サイト・書籍 33
Next.jsのSSRF脆弱性 CVE-2024-34351
Fullstack app with TypeScript, Next.js, Prisma & GraphQL
個人的におすすめしたいプログラムの技術サイト - Qiita
Building Your Application: Testing | Next.js
喫茶店でも日経電子版を読みたい — HACK The Nikkei
Next.jsで動的にXMLサイトマップを生成する
Next.js App Router Training
モノレポでの GitHub Actions CI の泥臭い高速化
Vercelを使わずにAWSだけでNext.jsのISR対応!【serverless-next.js】
Findyのフロントエンドにおけるメッセージ画面のパフォーマンス改善 - Findy Tech Blog
Next.js の API Routes から SWR の型推論を導く
プロンプトからREST APIを作るサービス『Hanabi.REST』の技術構成
microCMS と Next.js でブログを作る（SDK 版） | DevelopersIO
メルカリ ハロ立ち上げ時のSRE | メルカリエンジニアリング
JavaScriptの多用はSEOに悪影響なのか？Vercelが徹底的に調査、結果は？
【エンジニア向け】生産性を上げるチートシートまとめ - Qiita
Announcing Docker Compose Watch GA Release | Docker
Next.js の Server Actions について
Building a realtime chat app with Next.js and Vercel