タグ

関連タグで絞り込む (11)

タグの絞り込みを解除

next.jsとapp routerに関するokyawaのブックマーク (8)

  • Nextjs App Router での静的サイトのための設定と実装 | suzu6

    NexjsのApp RouterでSSGでの静的サイトを構築した際の備忘録。 用意して頂いた環境が良くあるレンタルサーバーだったので、SSGで生成したindex.htmlをURLの通り分けたフォルダに置く必要があった。App Routerで作成して無理ならPagesに戻すつもりで進めたら、意外と何とかなった。 Nextjsのドキュメント | Static Exports ポイントは以下の通り。 next.configの設定 output: 'export' : 静的サイトまたはSPAとしてビルドする設定 trailingSlash: true : これを設定すると/path.htmlから/path/index.html となる。 pages.tsxの実装 'use client' : クライアント側で処理を実行する 動的にURLを生成するためのgenerateStaticParams()の

  • [Next.js] App Router環境下のページ毎のレンダリング形式の設定方法

    概要 今回は、最近実務の中で調査を行った App Router 環境下でのページ毎のレンダリング形式の設定方法について、まとめていこうと思います。 具体的には、Pages Router の環境と比べて、ページに対しての SSR と SSG の設定方法と、SSG での細かな挙動の設定方法などが異なっていたため、その辺りについての記載を行なっていこうと思います。 公式のドキュメントを参照しながらまとめたため、大きな解釈違いはないと思っているのですが、間違っている箇所などあれば気軽にご指摘いただけると嬉しいです。 今まで（Pages Router）のレンダリング形式の設定 getServerSideProps や getStaticProps で SSR や SSG の設定が行える getStaticProps は getStaticPaths で細かな定義が行えます getStaticPath

    [Next.js] App Router環境下のページ毎のレンダリング形式の設定方法

  • Next.js App Router での MPA フロントエンド刷新

    JSConf JP 2023

    Next.js App Router での MPA フロントエンド刷新

  • 【Next.js】実務でapp routerに移行した所感

    app router とは next.js で使用できるファイルシステムベースのルーターです。以前は pages router というものがありましたが、そちらの進化系といえます。 ポイントは error.tsx や loading.tsx などの決められた名前でコンポーネントを作成することで、エラーバウンダリーやサスペンスなどの機能が簡単に利用できるようになったことです。 これにより開発速度が上がり、面倒な実装はフレームワークに任せることができます。 また、内部で RSC を使用しており、これとサスペンスにより、コンポーネントレベルで SSR と CSR を組み合わせられるようになりました。 今回はそういった機能の、弊社プロダクトにおける使用例を紹介します。 使用技術 error.tsx エラーバウンダリーです。fallback コンポーネントを書くだけで ok です。 import {

    【Next.js】実務でapp routerに移行した所感

  • Pages Router と App Router での i18n 対応の違い

    Next.js で作っていた個人ブログの App Router への移行を試みていたのですが、軽い気持ちで実装していた i18n 周りの移行に苦労しました。このブログでは、ライブラリを使わずに i18n 対応する際の Pages Router と App Router での実装方法の違いについて紹介したいと思います。 ３行まとめ Pages Router で利用できた i18n Routing が App Router では利用できない App Router で i18n 対応を実装するには、Next.js の middleware や rewrites などの機能をうまく活用する App Router 向けの i18n 対応ライブラリは、ビルド時にコードを大きく書き換えており、Tubopack などを見据えた将来的な安定性に少し不安がある i18n 対応で必要なこと 個人ブログの i18

    Pages Router と App Router での i18n 対応の違い

  • 個人ブログの Next.js v13 移行でやったことまとめ

    Next.js v13 への移行でやったことまとめ 準備 基礎となる記事に目を通した -> https://zenn.dev/link/comments/eefa4975aaedaf マイグレーションガイドを見て一つずつ対応しようかなと思ったけど、記事が長いのでnext devで動かして出てきたエラーを潰していく方法にした。とりあえずビルドできるようになったら、見落としやより良いやり方があるか確認するために読む。 ページコンポーネントに対して pages にあるファイルを app ディレクトリに移動させる 規約 通りに page と layout にコンポーネントを分割する getServerSideProps の処理をasync function getData() に変更する コンポーネントを async 関数にする props ではなくコンポーネントの中でgetData()の返り値を

    個人ブログの Next.js v13 移行でやったことまとめ

  • Next.jsの新常識「App Router」を学ぼう！

    Next.jsは、ルーティングとサーバー処理を高度に協調させるためのフレームワークとして、デファクトスタンダードの地位を確かなものにしています。2023年5月5日に公開されたNext.js 13.4において、フレームワークの根幹であるルーティング機構を刷新する新機能が追加されましたので、今後のNext.jsはどんな世界観で扱えばいいのかを解説していきます。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Ventura 13.4 Node.js 20.2.0／npm 9.6.6 React 18.2.0 Next.js 13.4.4 より直感的なルーティング、よりサーバーを活用したレンダリング Next.jsは、ReactでWebサイトやWebアプリケ

    Next.jsの新常識「App Router」を学ぼう！

  • Next.js App Router (app ディレクトリ) の逆引き辞典

    2023/05/05 追記 v13.4.0 をもって App Router は安定版になりました！ https://nextjs.org/blog/next-13-4 公式ドキュメントもベータ→正式版にマージされました。 内容が充実してきている様子ので、そちらを確認してください。 https://nextjs.org/docs 加えて、公式ドキュメントの改善で分かったポイントもいくつか修正しています。 Next.js v13 から App Router 機能 (app ディレクトリ) が新しく追加されました。 （v13.3.0 現在はベータ版です。 v13.4.0 をもって安定版になりました！） ファイルベースの Layout 機能 処理の一部を Server Component に移しバンドルサイズを削減できる 例: remark を利用した Markdown のパース が有名なところだ

    Next.js App Router (app ディレクトリ) の逆引き辞典
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.