Next.jsでは、HeadにScriptタグは使えません！
最初に結論 Next.jsには、Headタグ内にScriptタグが入った場合はScriptタグを無視するという仕様があります No Script Tags In Head Component v11からの仕様のようでした https://nextjs.org/docs/basic-features/script > Version History v11.0.0 next/script introduced. どうしたらいい？ Headタグの外に、Scriptタグを書きましょう ※ Headタグに含めなければ、自動で<body>に入ります import Head from 'next/head' import Script from 'next/script' export default function App({ Component, pageProps }: AppProps) {
[Next.js]極限まで簡単に非同期データのSSRを実装する
極限まで簡単に SSR を実装する流れ 不要な既存機能 今回の内容を実装するに当たってgetServerSideProps、getInitialProps、React Server Componentsは必要ありません。特殊なものを仕込んだりはしないのでnext.config.jsの設定も不要です。_app.tsx に何か書く必要もありません。 非同期データがコンポーネント上で簡単に SSR で出力可能 非同期データを扱う最小限のサンプルコードです。コンポーネント上で非同期の'Hello world!'を返していますが、きちんと初期レンダリングで HTML 上に出力されています。もちろん fetch で取得したデータも利用出来ますが、そちらは後ほど紹介します。 src/pages/simple.tsx 非同期データが必要なコンポーネントを<SSRProvider>で囲み、データが必要なとこ
![[Next.js]極限まで簡単に非同期データのSSRを実装する](https://cdn-ak-scissors.b.st-hatena.com/image/square/16022ccda0653c56e76df6d690aee9809a104a9c/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--ASUV9UV2--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BNext.js%25255D%2525E6%2525A5%2525B5%2525E9%252599%252590%2525E3%252581%2525BE%2525E3%252581%2525A7%2525E7%2525B0%2525A1%2525E5%25258D%252598%2525E3%252581%2525AB%2525E9%25259D%25259E%2525E5%252590%25258C%2525E6%25259C%25259F%2525E3%252583%252587%2525E3%252583%2525BC%2525E3%252582%2525BF%2525E3%252581%2525AESSR%2525E3%252582%252592%2525E5%2525AE%25259F%2525E8%2525A3%252585%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E7%2525A9%2525BA%2525E9%25259B%2525B2%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2VlZTgzMDYyMDQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Tailwind CSSでz-indexの値をマジックナンバーにしないための小ワザ
背景 小ネタです。 先日以下のようなバグ改修タスクでソースレビューを担当しました。 「全画面モーダルを実装したら、グローバルメニューより上に表示されてしまった。なのでz-indexを修正しました！」 我々が開発しているマナリンクでは、画面右上の自分のアイコンをクリックするとメニューが表示されます。 ところが全画面モーダルを実装したら、モーダルがメニューよりも上に表示されてしまい、モーダル表示中にメニューを操作できなくなってしまったとのこと。 最初のPull Requestの時点では、以下のような差分になっていました。 <div - className={'z-50 w-full border-b border-b-gray-shadow} + className={'z-10 w-full border-b border-b-gray-shadow} > これをレビューするときの僕の気持ち
KalidoKitであっさりLive2Dアバター体験
KalidoKitとは!? KalidoKitとは、お手軽にアバター体験が出来る大人気ライブラリです。 WebブラウザとWebカメラさえあれば簡単に実行できてしまいます。(お手軽ですね!!) 今回は、サンプルコードを実行するまでの手順をなるべく簡単にしてご紹介いたします。 (細かいことは抜きにして体験する事が大事っ!!) KalidoFace GitHubからプロジェクトをダウンロード GitHubからKalidoKitのソースコード一式をダウンロードします。 KalidoKit ダウンロードしたプロジェクトフォルダの中にあるLive2D用のモデリングデータをお借りします。 "/docs/models/hiyori"にある"hiyori"フォルダをコピーしておきます。 プロジェクトを用意する 次の様にプロジェクトを作ります。(先程ダウンロードした"hiyori"フォルダを忘れずに!!) M
設計書を書かない設計で開発効率を向上させた話 - Tabelog Tech Blog
この記事は 食べログアドベントカレンダー2023 の23日目の記事です🎅🎄 こんにちは。食べログシステム本部 技術部 仕入チームの@shohei-yです。 今回は、新規事業の「食べログ仕入」プロダクト開発において所謂「設計書」を書かない設計に挑戦して開発効率を向上させた話を書きます。 （結局「書くの？書かないの？どっちなんだい！」と感じた人は、ぜひ読み進めてください。） 所属している仕入チームについてはこちらの記事をご覧ください。 目次 なぜ設計書を書かない設計に挑戦したのか 設計書を書かないチーム 設計書を書かないことによる問題 1. チーム協力の課題 2. ソースコードの複雑化 3. チーム変動に関わる問題 設計工程導入のきっかけ 設計書を書かない挑戦の背景 設計書を書かない設計 フロントエンド・バックエンドのインターフェースの明確化 ソースコードのスリム化対策 設計のレビュー方法
React Server Componentsを理解する | POSTD
私も年を取ったと感じるのは、今年Reactが10年目を迎えたからです。 混乱していた開発コミュニティにReactが初めて紹介されてから10年、以来いくつもの進化を遂げてきました。Reactチームは、急進的な改革ということに関しては躊躇しませんでした。問題に対して、より良い解決策が見つかれば、それを実行してきました。 数か月前、Reactチームは最新のパラダイム・シフトであるReact Server Componentsを発表しました。史上初めて、Reactコンポーネントがサーバーでのみ実行できるようになったのです。 このことに関連してオンライン上では、きわめて大きな混乱が起きています。それが何なのか、どのように機能するのか、利点は何か、そしてSSR（Server Side Rendering）などとどのように連携するのか、多くの人が多くの疑問を抱いています。 私はReact Server
React Server Componentsを活用したNext.jsの新構造 - Qiita
これは何 Next.js App Routerでは、データfetchをとっとと下層に動かすと幸せという話。 幸せを噛みしめるために、今までfetchで困ってきた歴史？の説明。 クライアントサイドfetchの問題 ほとんどのデータは全ユーザーに共通のものだ。 これをクライアントサイドから const Component = () => { const [data, setData] = useState(); useEffect(() => { fetch('https://api.com') .then((res) => res.json()) .then((json) => { setData(json); }); }, []); return <>{data}</>; }; このようにfetchすれば、サーバーサイドレンダリングのメリットの多くを失うことになる。 表示が遅い。ファースト
Bashの便利な構文だがよく忘れてしまうものの備忘録
Bashでスクリプトを書く場合のポイントをまとめた Bashなどで書くシェルスクリプトは文法がシンプルで覚えると便利。他のプログラム言語だと何行もかかなければならないファイル操作や中身のデータ処理を、ちょちょいと数行レベルで書けとても強力だ。コマンドとの親和性が高い恩恵だろう1。 旧来バッチ処理で本領を発揮するシェルスクリプトだったが、昨今はDocker（Dockerfileや起動スクリプトなど）で活用される機会も多いだろう。 しかしながら他のプログラム言語ではみられない記法があったり、逆に似た書き方もあったりと、混乱しがちなのもシェルスクリプトの特徴かもしれない。 いちいちGoogle先生に確認するのもめんどうなので、このページに整理した2。 主な参照先（よくお世話になっているページ）： UNIXの部屋(68user's page) - http://x68000.q-e-d.net/~
[ターミナル]fzfを使った自作インタラクティブアプリを作ってみよう！〜git addを快適に〜 | DevelopersIO
こんにちは、平野です。 皆様におかれましては、快適なターミナルでのCUI生活を送っておられますでしょうか？ 今回はfzfを使った、便利なコマンドを自作する手順について紹介してみたいと思います。 fzfにはいくつかの便利で強力なコマンドが公式に用意されていますが、今回はそれらを使わず、fzfのバイナリファイル1つを核としてコマンドを自作する方法を紹介します。 もちろん用意されたコマンドもすごく便利なんですが、自分でカスタマイズできると、あれやこれやいじれて楽しいです。 fzfとは fzfは大量の選択肢の中から、検索を使って目的の項目を簡単に選択できるツールです。 今回の記事はfzfや類似のツールを使ったことがあるという前提で詳細は省きますが、めちゃくちゃ便利なので使ったことがないという方はこれを機会にインストールしてみて欲しいです。 fzf (GitHub) 一応説明を書いておくと、fzfを
![[ターミナル]fzfを使った自作インタラクティブアプリを作ってみよう！〜git addを快適に〜 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/006c30b8ac6592e23f3f89176f7a3c640586a404/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Ffzf.png)
GitHub Copilot導入後、初めて使う時。(豊富な使用例付き) - Qiita
※GitHub Copilotが長いコードを提案してきた時、ショートカットキーの「単語単位で受け入れる」を使用すると便利です。 ※ インライン候補をトリガーするとは提案が表示される場所ならばどこでも GitHub Copilot が動きます。 例えば、提案が表示される場所からカーソルが動かしてしまっても、カーソルを元の場所に戻してトリガーコマンドを使うと提案が表示されます。 ※ インライン候補をトリガーするはデフォルトのキー設定では動きません。：Windows で確認 自分でキーボードショートカットキーを設定する必要があります。（これは自分の環境だけかもしれません。） 導入後（課金後） 導入後に何をしていいのか？何が出来るのかがよくわからなかったので調べてみた。 環境 Windows10 GitHub Copilot (導入 1年契約 or 1月契約) VSCode VSCode Insi
プログラミングでよく使う英単語のまとめ【随時更新】
プログラミングでよく使う英単語のまとめ【随時更新】 随時追加、整理していきます。 名前をつけるときには、名詞、動詞の違い、複数形、過去形などに注意しましょう。 オブジェクト指向では、クラス名は名詞、メソッドは動詞とします。 使ってはいけない言葉 get / set アクセサ (getter / setter) やプロパティによく使われている。 それ以外に使うと混乱を招くのでよくない。 get は軽量な処理と考えるので、中に重い処理は書いてはいけない。 単純な取得/設定以外で使いたくなったら他の言葉を考える。 load, save, commit, store, enable, disable, fetch, register, configure, add, etc... check 意味が広すぎて何をしているかわからない。 できるだけ別の言葉を使う。 具体的に何をしているかに分解して考え
ZOZOTOWNのWebホーム画面をNext.jsでリプレイスして得た知見 - ZOZO TECH BLOG
はじめに ZOZOTOWN開発本部の武井と申します。ZOZOTOWNのフロントエンドリプレイスプロジェクトを主に担当しております。ZOZO DEVELOPERS BLOG でも「ZOZOのリプレイスプロジェクトで得られる唯一無二の経験。大規模サービスを進化させるやりがいとは」というインタビュー記事を掲載しておりますので、もしよろしければこちらも併せてご覧ください。 さて、本題です。現在ZOZOTOWNではオンプレミスかつ、モノリスだった既存システムをマイクロサービスAPIに責務を分割したり、インフラをクラウドに移行したりしています。しかし、いわゆるWebのUIを構築するためのシステムは現在も既存システムに新機能開発や機能改修を行なっており、リプレイスに着手できていませんでした。 そこで、まずホーム画面から段階的にリプレイスすべく設計・開発を昨年から行ない、無事リリースできました。ZOZOT
JavaScriptのモジュールについてまとめてく: 歴史編
モジュールとは？ 関連した機能を持った変数や関数を一つのまとまりにした記法。 モジュールは、特定の機能やコンポーネント、ライブラリをカプセル化し、他のモジュールやプログラムから独立した存在にできる。 import文やrequire文でインポートするライブラリもモジュール形式でビルドされている
ES Modules入門 - JavaScriptでモジュールを使う時代 - ICS MEDIA
JavaScriptには、モジュールという仕組みがあります。ECMAScript 2015のModulesの標準仕様として策定されており、現在はすべてのブラウザで利用できます。この機能は、ES2015 Modules、ECMAScript Modules、ES Modules、ESMなどと呼ばれています（以下、ES Modulesと記載します）。 webpackやViteなどのフロントエンドのツールを通して、すでにES Modulesを使っているエンジニアも多いと思います。この記事では、ブラウザネイティブで使えるES Modulesに焦点をあて、ES Modulesの導入で解決できる課題と利点を紹介します。 HTML+JSではモジュールの仕組みがなかった JavaScript自体には他のJSファイルを取り込む標準的な仕様が昔は存在しませんでした。外部JSファイルを読み込みたい時に、HTML
AutoHotkey スレッド part30 IDのみ
0001名無しさん＠お腹いっぱい。垢版2022/02/08(火) 18:38:19.33ID:UTRGyCNl0 元々がIDのみの表示で番号の始まっているスレを途中から別の表示で乗っ取るのは「背乗り」行為に当たるので、IDのみの表示で進行とします ■配布元 https://autohotkey.com/download/ ■前スレ AutoHotkey スレッド part29 https://egg.5ch.net/test/read.cgi/software/1620768466/ ■日本語解説等 AutoHotkey Wiki http://ahkwiki.net AutoHotkeyを流行らせるページ(ミラー) http://hdd.s300.xrea.com/ahk/ AutoHotkeyJp(過去ログdatあり) https://sites.google.com/site/aut
VSCodeを使ったデバッグテクニック：公式ガイドの日本語訳 - Qiita
VSCode Debugging公式ガイドの日本語訳です。 ※ 翻訳記事は、2023年5月3日時点の公式情報に基づいています まずは個人的な収穫をば VSCodeは.vscode/Launch.jsonという設定ファイルをいじって、 自分好みのデバッグ環境をカスタマイズできる👍いいね VSCodeは、ワークスペース (プロジェクト ルート フォルダー) またはユーザー設定またはワークスペース設定の .vscode フォルダーにある Launch.json ファイルにデバッグ構成情報を保持します。 手順 公式ページ（英語版）：https://go.microsoft.com/fwlink/?linkid=830387 本記事（日本語版） ：起動構成 (Launch configurations) デバッグ設定の使用例 とある海外のVSCode拡張機能のOSS開発プロジェクトのlaunch.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【完全版】Next.jsのSSG、SSR、ISR、CSRを図とコードでスッキリ理解する - らくらくエンジニア
Next.js 14 アプリ開発のあらすじ
Javascript debug start and run really slow (WSL) · Issue #209910 · microsoft/vscode
localhost:3000