Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。
※本ページは、アフィリエイト広告を利用しています。 国産ヘッドレスCMSとして注目されている「microCMS」とJavaScriptフレームワーク「Next.js」を使ったモダンWebサイトの制作について初心者でも分かりやすく解説した入門書を紹介します。 当ブログはWordPressですが、ここ数年ヘッドレスCMSに注目が集まってきています。ヘッドレスCMSって何？という人からNext.jsは使ったことがないという人でも本書でしっかりと学ぶことができます。 著者陣は非常に豪華で、microCMSの開発陣です。開発者と聞くと開発側の目線なのでは？と心配になるかもしれませんが、実装者目線のステップバイステップで架空のコーポーレートサイトを実装しながらmicroCMSとNext.jsを用いたWebサイトのモダンな制作方法を学べます。 WordPressは使ったことがあるけどヘッドレスCMSは初
App Routerについて色々調べたので、「Page Routerからどう変わったか？」を中心にいろいろ書きます。 ※Next.jsのバージョンは13.4です 🤗Page Routerから変わった点 「これだけ抑えておけばOK」な内容についてザックリ書きます。 特別な意味を持つファイルができた Page Routerではpages直下につくったファイルがすべてルーティングされました。 ですがApp Routerでは、app直下のpage.tsxと書かれたファイルだけがルーティングの対象になります。 ほかにも、layout.tsxと書かれたファイルを置いておくと「layout.tsxでpage.tsxを自動的にラップする」ができたりします👇
Next.js って SEO に強いっていうけど、本当はどーなのよ 業務でブログサイトをリプレイスすることとなり、Next.js は SEO に強いと聞いたけど、どんな感じかなと思って調べてみました。 調べる前の私の知識は「SSG(もしくはISR)により、事前に静的なファイル(HTML)が作成されるため、ハイパフォーマンスなサイトができる」というものでした。 そこで、公式サイトで紹介されている SSG で構築された DEMO サイトを試しに見てみました。 確かに表示は速いですし、遷移もサクサクと動きます。でも、あれ？この遷移ってブラウザによる遷移ではなく、SPA のように JS に描写で切り替えてね？と思ったのが、最初です。 それって SEO 的にいいんだっけと。 気になったので、調べてみることにしました。 Next.js がハイパフォーマンスなサイトを作るために提供している機能を2つあげ
はじめに 最近話題の frourio をご存知でしょうか？ TypeScriptフルスタック環境 を一発で作れるフレームワークです。実際に試してみると分かりますが、簡単に環境構築が出来ます。 こんな簡単に作れるなら、試しにアプリを作って外部に公開するとこまでやってみたいですよね。 この記事では、その環境を Vercel と Heroku を利用し、無料でサクッとデプロイする手順を紹介します。 全体構成 デプロイ先としては、フロントエンドは Vercel 、バックエンドは Heroku を選択しました。 選択理由 選択理由としては以下です。今回は "無料でサクッと" がコンセプトなのでポイントと考えています。 基本的に無料で利用可能なこと インフラレイヤを意識せずに簡単なセットアップで利用可能なこと Vercel と Heroku について Vercel Vercel は Next.js を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
