Next.jsとは 人気・最新記事を集めました - はてな (original) (raw)

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。

関連ブログ

stay foolish•1日前

やりたい事をやる。それでいいじゃないかたぶん、自分自身を突き詰めると職人になりたかったんだと思おう。 ２６歳からシステムエンジニアを始めておそらくある程度の素養があったので５０歳の今まで続けられてきたのだと思う。 ただ、根っから臆病でいつか自分が必要とされない日が来てしまうかもしれないと言う不安から、システムエンジニア界隈の２８歳定年説、３４歳定年説、４０歳定年説に怯えあれこれ手を出していくうちに、今に至ってしまったのだがもう少し技術にどっぷりとハマりたかったと後悔しています。 家族を抱えて、収入が滞こおってしまわない様にと考えるあまり、本来技術職の面白いところから少し遠のいてしまっていました。

#Next.js#モンハン#GitHubActions#CI/CD

ネットで話題

もっと見る

847ブックマークNext.jsの考え方zenn.dev

582ブックマーク大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました - Qiitaqiita.com

447ブックマークNext.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代どうも、@yuyaaar です。 最近は Next.js アプリを見ることが多くなってきました。もはや JAM スタックの王道、と言っても過言ではないかもしれません。 ですが、やっぱりフルスタックとなると、データベースや認証などが必要になってきて、その辺のやり方がいまいちよくわからない、という人も多いのではないでしょうか...yuyao.me

444ブックマークNext.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな - Qiitaqiita.com

438ブックマークレシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログtechlife.cookpad.com

433ブックマークVue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガクfwywd.com

411ブックマークNext.js + TypeScript + Tailwind CSS の開発環境をできるだけ丁寧に構築する【2024年】zenn.dev

399ブックマークいまNext.jsで新規サービスを立ち上げるときの観点（Router・CSS・認証・監視など/2023年末）zenn.dev

398ブックマーク（基礎編）jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコードzenn.dev

関連ブログ

弁護士ドットコム株式会社 Creators’ blog•1日前

MockServiceWorker（MSW） を使った高速開発のための運用事例クラウドサイン事業本部の田邉(𝕏@s_tanabe_)です。 フロントエンドの開発に携わっているみなさんは、バックエンドや BFF(Backends For Frontends) の開発を待たずにフロントエンドの開発に取りかかりたいと考えたことはありませんか？ これが実現できると フロントエンドでの不確定性を早いうちに潰しておける バックエンドと並行してフロントの開発を進めることができるようになる など開発の高速化につながるメリットを享受することができます。 そしてこれを実現することができるようになるツールこそが Mock Service Worker です。 以降では Mock Servic…

#MSW#Next.js#TypeScript#フロントエンド

ROUTE06 Tech Blog•2日前

VercelのAI SDKを使ってLLMの出力を構造化しつつストリーミングする大規模言語モデル（LLM）使ってアプリケーションを開発する際、開発者が直面する重要な課題の1つは、LLMの出力を構造化されたオブジェクトとしてストリーミングすることです。このブログ記事では、VercelのAI SDKを使って、LLMの出力を構造化しながらストリーミングする方法をサンプルコードと共に紹介します。 LLMの出力の課題 LLMを使用する際、生成結果をユーザーに早く見せるために出力をストリーミングすることがよくあります。しかし、ストリーミングデータは構造化されていないので以下のような課題に遭遇します。 「日本の四季それぞれについて短い説明をJSONで構造化して出力してください。」とLL…

#ai-sdk#Next.js#streamObject

SoBlog•5日前

「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発」を読む良かったところ SSG＋CSRのWebアプリ作成が体験できる 悪かったところ(もしあれば) 内容が古く実行が困難 学んだこと SSG＋CSRのWebアプリ作成におけるポイント(下記参照) 難しかったこと 内容が古く環境構築から実行が困難 よってGithubからcloneしたものをベースに検証 要件定義 N/A 設計 SSRはシンプルだがUXを損なう恐れがあるため、SSG＋CSRがおすすめ SSG＋CSRはSSGで共通部分は先に表示させて必要な箇所はCSRで非同期で表示させる Pages Routerは安定しているが、App Routerはまだ不安定な所がある 今後はApp Routerが推奨さ…

#TypeScript#Next.js#プログラミング

SoBlog•1ヶ月前

NEXT.jsまとめ環境構築 各コマンド // 雛形作成(xxxは雛形名) npx create-next-app xxx // 開発環境スタート npm run dev // 本番前のビルド npm run build // ビルドしたものが見れる npm run start VSCodeにNextjs snippetsを入れてnfでタイプ補完 基礎 SSGはビルド時にSSRはリクエスト時にレンダリングされる pagesディレクトリ内のファイルが直接ルーティング先となる aタグ(リロードあり)ではなくLinkコンポーネント(リロードなし)を使う 静的画像はpublicディレクトに入れる cssモジュールはxxx…

#プログラミング

yasutomogのブログ•1ヶ月前

【Next.js & microCMS】SSGのビルドパフォーマンスチューニング前提 Next.jsとmicroCMSを使用し、数百ページのWebサイトを構築している App Routerは使用していない（Next.jsの採用時にApp Routerがまだ正式採用されていなかったため） ISRも使用していない（業務要件の兼ね合いから使っていない） Amplify上で、SSGして静的サイトを構築している 課題 ページ数が増えることで、ビルドのパフォーマンスが気になってきた 当初から想定していたが、想定よりも遅いことが気になってきた microCMSの簡単なデータ構造 microCMSでは下図にある通り、各ページからヘッダーとフッターのデータを参照している。また、ヘッダーとフ…

#Next.js#microCMS#SSG#パフォーマンス・チューニング

ジモティー Tech Blog•2ヶ月前

ジモティーAdsフロントエンド構成はじめに フロントエンドとバックエンドを担当している川崎です。 今回は前回に引き続き、ジモティーAdsについてお話しします。 広告主様向けの広告出稿や効果レポートの確認が行える管理画面のフロントエンド構成についてご紹介します。 ジモティーAdsとは ジモティーに直接出稿できる運用型の広告配信プラットフォームです。 「ジモティーAds」で出稿された広告をジモティーのスマートフォン向けアプリ・webブラウザのフィード面に配信することができます。 ジモティーに登録されたユーザー情報や過去の行動履歴から、ユーザーにとって最適な広告を配信できることが特徴です。 ジモティー本体の構成と比較 前提として、ど…

#フロントエンド#ジモティーAds#Next.js

Web開発における知見共有系ページ•3ヶ月前

Next.jsでSSGの挙動をローカル環境で確認する方法Next.jsでSSGの挙動をローカル環境で確認する方法 手順 開発モードでの確認 確認ポイント Next.jsでSSGの挙動をローカル環境で確認する方法 Next.jsで静的サイト生成（SSG）の挙動をローカル環境で確認する方法は、以下の手順で行います。 手順 1. プロジェクトディレクトリに移動 cd sample-project2. SSGの設定 Next.jsでは、getStaticProps関数を使用してSSGを設定します。 例として、pagesディレクトリにあるページで以下のように設定します。 // pages/index.js export async function getS…

#Next.js#SSG#ローカル環境#npm#ビルド#build

Web開発における知見共有系ページ•3ヶ月前

Next.jsでapi.interceptorsはクライアントサイドとサーバサイドのどちらで実行されるのかNext.jsでaxiosのinterceptorsの設定処理はクライアントサイドとサーバサイドのどちらで実行されるのか クライアントサイド サーバーサイド 結論 Next.jsでaxiosのinterceptorsの設定処理はクライアントサイドとサーバサイドのどちらで実行されるのか Next.js では、axiosのinterceptors の設定処理はクライアントサイドとサーバーサイドの両方で実行される可能性があります。 Next.js はユニバーサル（サーバーサイドレンダリングとクライアントサイドレンダリングの両方をサポート）なフレームワークであるため、設定の場所や使用方法に応じて異なり…

#Next.js#axios#クライアントサイド#サーバサイド

Web開発における知見共有系ページ•3ヶ月前

Next.jsでクエリパラメータを取得する方法Next.jsで画面のクエリパラメータを取得する方法 1. useRouterフックを使用する方法 手順 実装例 2. getServerSidePropsを使用する方法 手順 実装例 3. getStaticPropsを使用する方法 Next.jsで画面のクエリパラメータを取得する方法 Next.jsで画面のGETパラメータを取得する方法にはいくつかの方法があります。 以下に、useRouterフックを使用する方法と、getServerSidePropsを使用する方法の2つを説明します。 1. useRouterフックを使用する方法 Next.jsのuseRouterフックを使用すると、クラ…

#Next.js#useRouter#クエリパラメータ

Diary•12時間前

monorepo における renovate 設定の紹介Renovate は非常に柔軟な設定が可能なツールですが、リポジトリの規模やチーム構成に応じて、最適な設定は異なることがよくあります。 renovate 導入時、実際に役立つサンプルがあまり見つからなかったため、ここでは私が個人プロジェクトや業務で試した設定例をそのまま紹介します。 前提 以下のコードが 1 つのリポジトリで管理されている バックエンド Go フロントエンド Next.js インフラ Terraform データまわり Python 等 開発者は 2-3 人 GitHub でコードを管理しており, GitHub Actions で CI/CD は一通り準備している

shu915’s blog•21時間前

サービスの使用技術を調べてみよう私達は、普段様々なWEBサービスをつかって、生活していますが、 それらのサービスがどの技術で作られたか、気になることありませんか？ wrapper lyzerというクロム拡張ツールをいれると、調べることができます。 導入 以下のurlから導入できます。 chromewebstore.google.com 使い方 調べサイトに訪れて、ブラウザの右上にあるエクステンションの中から、 wppar lyzerをクリックするだけ これでサービスが何によって作られているかある程度わかります 検出できない技術もある Ruby, Java, PHPで作られたものは検出できるけど golangは検出できない気が…

STORES Product Blog•1日前

wattanxとうしろのこに聞く、Vue Fes Japan 2024の見どころ【ep.31 #論より動くもの .fm】CTO 藤村がホストするPodcast、論より動くもの.fmの第31回を公開しました。今回はVue Fes Japan 2024について、フロントエンドエンジニアのwattanx、うしろのこと話しました。 podcasters.spotify.com 論より動くもの.fmはSpotifyとApple Podcastで配信しています。フォローしていただくと、新エピソード公開時には自動で配信されますので、ぜひフォローしてください。 難易度の高い取り組みには、基礎的な知識がベースにないと応用できない 藤村：こんにちは、論より動くもの.fmです。 論より動くもの.fmは STORES のCTO 藤村が…

コハム•1日前

WP Engineとは何者か？マット・マレンヴェッグとのトラフルがWordPressユーザーに与える影響とは先日からWP Engineという企業とWordPressの開発者であるマット・マレンヴェッグの間で諍いが生じ、WP Engineの提供するサービスの将来が不透明になってきました。 背景 WP Engineとはどんな企業か？ WP Engineが提供するサービス WP Engineが提供するプラグイン・アプリケーション 背景 マット・マレンウェッグは、WP Engineが「フリーライダー」「癌」であるとブログで批判しました。 そしてWP EngineからWordPress.orgへのアクセスをブロックすると発表。 一方WP Engineはウェブコンテンツ管理プラットフォームのWordPressの…

sollamu’s diary•2日前

Next.js 使い方記事を投稿しました。 天気: 雨気温: 14°C降水確率: 90%湿度: 99%風速: 2 m/s時刻: 2024年10月09日 0:00 (水曜日) sollamu.com 記事タイトル：Next.js 使い方 『IT Shop』powered by Saka Blog

sollamuの日記•2日前

Next.js 使い方記事を投稿しました。 天気: 雨気温: 14°C降水確率: 90%湿度: 99%風速: 2 m/s時刻: 2024年10月09日 0:00 (水曜日) sollamu.com 記事タイトル：Next.js 使い方『IT Shop』powered by Saka Blog

sollamucomの日記•2日前

Next.js 使い方記事を投稿しました。 天気: 雨気温: 14°C降水確率: 90%湿度: 99%風速: 2 m/s時刻: 2024年10月09日 0:00 (水曜日) sollamu.com 記事タイトル：Next.js 使い方『IT Shop』powered by Saka Blog

Commune Engineer Blog•3日前

単純な実装でみんなの負担を減らした話 〜サイトカスタマイズ機能の開発物語〜こんにちは、Webエンジニアの野川（@chan_naru_way）です。趣味は、Perplexity AIを触ってなんでも知った気持ちになることです。（最近はGensparkも面白い！）とはいっても、回答を鵜呑みにせずに自分の頭で考え続けたい、まだまだAIに使われたくない所存です。 徐々にパソコンのファンの風が心地よく感じる季節になってきました。季節の変わり目なので、みなさん体調に気をつけてくださいね〜。 今回は、Communeで提供している機能のひとつ「カスタムブロック」が、どんな課題を解決するために、どんな判断や開発を経て作られたのかを紹介します。ひとつの事例ですが、私たちの開発の雰囲気が…

トマシープが学ぶ•3日前

ReactからSlackへ通知Next.jsを使っているReactのWebアプリ内からとあることをしたときに、特定のSlackに通知を飛ばしたい。Incoming Webhooksを使うらしい。 Incoming Webhooks 静的エクスポートじゃなければうまくいきそうなServerAction方式 buildできない api方式 その他 Incoming Webhooks webhookのURLの取得の仕方は、Slack Appを作ってIncoming Webhookの有効化をする方法と、すでに作られているIncoming WebhookというSlackApp?を使う方法の２種類作成の仕方があるっぽいが、どちらでも大…

三十路過ぎてもこんな感じ•4日前

React界隈がそんなに変わってなくて安心した3年ぶりくらいにReactを書いてみたところ当時の知識でもすんなり書けたのでよかった、という話。 先日思いつきでGoで書いたAPIサーバーのUI部分をReactで書いてみたのだが、そこまで変わっているところもなくてスラスラと書き進めることができた。 bary822.hatenablog.com まだuseStateだし、stateを変更する関数をバケツリレーするし、テンプレートエンジンは相変わらずJSXだし、useEffectで外部サーバーとやり取りするし、といった感じで当時自分が書いていた*1ときからほとんど変わらない書き味で書けた。 JSフレームワークは非互換の変更や主要機能の非推奨化をガ…

hatebg’s blog•5日前

個人ブログを作り直した以前 Laravel で個人ブログを作ったが、AWS の料金が高い & メンテが面倒という理由でやめた。今回は Next.js で作った。比べ物にならないほど楽である。 料金は $40 と相変わらず高いが。そのうちサーバーレスに移行しようと考えている。 oizumi-yuta.com

ITエンジニア Umeda ブログ•6日前

9月の学習の振り返りTypescriptと本気で向き合った9月の学習の振り返りをしたいと思います。 9月の学習時間 結果：110時間 7ヶ月合計：812.5時間 9月は仕事の関係で、少し時間があったこともあり、平日も比較的勉強時間を確保できたため理想的な勉強時間を確保することができました。欲を言えばあと20時間くらいは勉強できたかなと思うくらいです。 7月からフロントエンドの学習を丁寧に進めています。 7月：JavaScriptともう一度向き合う 8月：React(Javascript)課題を丁寧に進めて基礎的なHooksの理解を進める 9月：Typescriptの文法の再復習とmapped type/condi…