Next.jsでの_documment.js(tsx)・App.js(tsx)について爆速で理解しよう - Qiita
class SampleDocument extends Document { static async getInitialProps(ctx) { const initialProps = await Document.getInitialProps(ctx) return { ...initialProps } } render() { return ( <Html> <Head> <link rel="dns-prefetch" href="//www.google.co.jp" /> </Head> <body> <Main /> <NextScript /> </body> </Html> ) } } export default SampleDocument _document.js(tsx)では、<Html>, <Head />, <Main />, <NextScript
Next.js v.13のApp Directry × Google Analytics・トラッキングでお困りのあなたへ（TypeScript） - Qiita
おはこんハロチャオ～ ということで最近Next.js13でポケモン関連のwebアプリを作ったのですが、 Next.js13のApp Directryを触れるのが初めてだったので苦戦。。。 特にAnalyticsは避けて通れないのにもかかわらず日本語の情報が不足している感じがしたので、解決方法をお伝えできればと思います ちなみに作ったのは、ポケモンのタイプ相性を詳細に知れるサービスです バトル向けに使いやすい機能を追加していくつもりなので、よかったら見ていってください 前提 Google Analyticsを導入した回数もそんなに多くないので、前と同じように調べながら進めていました。 とりあえず、このようなサイトを使ってあーこんなのあったなで進めていきました 一応、これはClient Componentを使うべきだと思ったので、layout.tsxから切り離して作ったりしました 周辺はこんな
Next.jsの環境変数の使い方の基本と、Vercelの環境変数との関係性について - Qiita
Next.jsの公式サイトDefault Environment Variables を参考に、Next.jsの環境変数の取り扱い方法と、Vercel上の環境変数との関係性について調べ、ユースケースをまとめてみました。 Next.jsの環境変数の取り扱い方法について 後述の通り、環境変数の設定ファイルにXXXXX=Yの形で環境変数を定義しておけば、プログラム中でprocess.env.XXXXX の形式で環境変数を参照できる。 ただし、普通に環境変数を定義した場合、これらはブラウザ上からは見えないので(サーバーサイドで実行されるコードでのみ見える)、ブラウザ上で環境変数を使えるようにしたい場合(例えば、クライアントサイドでHTTP Requestを送信したい場合に環境変数を使いたい場合)には、環境変数名をNEXT_PUBLIC_で始めるようにすれば(ex. NEXT_PUBLIC_XXXX
【Next.js】getServerSidePropsでクエリパラメータを取得する方法 - Qiita
前回、Next.jsを使ったクライアントサイドでのクエリパラメータを取得する方法を解説しました。 Next.jsでクエリパラメータを遷移先に渡すにはどうすればいいのか？ - Qiita 前回使用したuseRouterフックはクライアントサイドで動きますが、サーバーサイドではエラーになります。そのためサーバーサイドでクエリパラメータを取得するには別の方法が必要です。 なので、今回はサーバーサイドでクエリパラメータを取得する方法を解説します。 サーバーサイドレンダリングでクエリパラメータを取得する方法 まずはサーバーサイドでレンダリングするためgetServerSidePropsの定義が必要です。その際の注意点としてはexportとayncキーワードをつけることです。これにより、リクエスト毎にこのページを事前にレンダリングします。 そして、このgetServerSidePropsの中でuseR
【React】Next.js13以降でURLのクエリパラメーターを取得する方法 - Qiita
概要 Next.jsでURLのクエリパラメータを取得する場合、Next.js useRouterで、query stringを取得するの記事にある通り、useRouterを使用する方法が検索すると出てくるかと思います。 ただ、Next.js13のApp Routerを使用している状態で同様の実装を行うとパラメータが取得できず、どのように実装すれば良いのかというのを今回メモ書きします。 前提 Next.jsのバージョンは13.3で動作確認しました。 App Routerの使用を前提としています。 対応 stackoverflowの記事、NextRouter was not mounted Next.JSにある通り13からuseRouterの仕様が変更になったようです。パラメータについてはuseSearchParamsを使用して、取得する必要があるそうです。 useSearchParamsの仕
SSRはおまいらには早すぎた 〜Next.jsのgetServerSidePropsの登場が何を意味するか〜 - Qiita
概要 Next.js 9.3から getServerSideProps という仕組みが導入されました。 上記がそのドキュメントですが、これを読んで感動した私はつい語りたくなってしまいました、私情が多分に含まれております、ああそういう視点もあるんだくらいに見ていただければと思います。 僕自身は、SEOをあまり気にしないいわゆるSPAっぽいWebページのNext.jsでの開発を1年ちょいくらい業務でやっていて、今もNext.jsユーザーです。 「getServerSidePropsって何が良いの？なんで生まれたの？」 「なんでgetInitialPropsは非推奨なの？」 「Vercel製のSWRってライブラリあるけど、あれ何？」 「てかgetServerSidePropsとSWRって関係あるの？」 この辺の疑問をお持ちのNext.jsユーザーの方は是非ご一読ください。 ※過剰な煽りタイトルで
Next.jsのISRを理解する - Qiita
目的 Next.jsのISRはどのような動作をするのかを、正しく理解したい！ ISRとは ISR(Incremental Static Regeneration)とは、SSGを利用しながらも、一定時間ごとにデータの再取得を行い、HTMLを再生成する手法のことを指します。 ISGとの違い ISRを調べていると、ISGという単語が一緒に出てくることがあります。 ISG（Incremental Static Generation）とは、Dynamic Routesのページにアクセスした際に、オンデマンドでページ生成を行う手法のことを指していたようです。 この単語は公式ドキュメントには現在明確には記載されている箇所はありません（おそらく…）。ドキュメント内に貼られているサンプルサイトを確認すると、ISGに関する記載が少しだけ残っています。 Dynamic RoutesのキーがツイートIDなどの場合
Next.jsのISRを学ぶ - Qiita
Incremental Static Regenerationとは 「段階的な静的サイト再生成」と訳されるStatic Site Generation(SSG)のデメリットを補う機能です。 SSGのデメリットといえば、「事前にビルドしたページ内容しか返却しないこと」です。 要するにビルド後にデータベースが更新されたとしても、再ビルドしない限りはページ内容が更新されることはありません。 そこでISRを利用することでページにアクセスされる度に再ビルドさせることができます。 次回以降のアクセスから再ビルドで新しく生成されたページを返却するので、データベースの更新に合わせてページ内容を更新させたい場合に有効です。 基本的なISRの使い方 例）登録したタスクの一覧を表示するページ /pages/tasks/index.tsx import { NextPage } from 'next'; impo
結局ReactとNext.jsのどちらで開発を進めればいいの？ - Qiita
はじめに 私は2021年10月からフロントエンドエンジニアへの転職を果たし、 研修で様々なアプリケーションを作成してきました。 先日まで社内用のSNSアプリケーション開発を同期の他の技術の方とチームを組んで開発を行ない、 フロントサイドとしては "Next.js"＋"TailwindCSS"＋"TypeScript" の技術を用いて開発を行いました。 この開発では、Next.jsの勉強を始めたばかりであり、その技術を使ってアプリケーションを作成したいみたいという意味合いが強かったですが、次のプロジェクトはそれぞれの技術の強みをしっかり理解した上で、その技術の強みを活かせるような開発を行なっていきたいと思っています。 しかし、いざ技術を選定する際に、Reactが良いのか、ReactのフレームワークであるNext.jsが良いのか、それぞれの強みはどこなのか等を考えた際に、知識が曖昧であることに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
