Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。

Next.js×TypeScript×microCMS×MantineUI×Netlifyでブログを作成したのでまとめと感想 はじめに この記事は、タイトルに記載の通りの技術スタックで趣味の芝生管理用のブログを作成したので、簡単にまとめと感想を書いておこうと思います。 実際のブログはこちら GitHubリポジトリはこちら（参考になった方は🌟をポチッと🙏） ブログ作成の動機 普段業務でNextjs(React)を触っているがSSRする必要がないアプリケーションということもあり、ファイルルーティングの機能くらいしか触っていなかったため、SSGやSSRの機能をちょっと触っておきたかったのと、最近流行りのJAMStack構成をmicroCMSを用いて経験しておきたかったという2点が主な動機です。 あと、勤めている会社でホームページを作り直す話があがっていたので、JAMStack構成を提案するた

最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA（PESPA）と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ

next.config.jsにoutput: "export"を追加すればいいみたい。 (appDir: trueはドキュメントから消えていたけど、不要になったのかな) 前言撤回。無いとと怒られた Error: > The `app` directory is experimental. To enable, add `appDir: true` to your `next.config.js` configuration under `experimental`. See https://nextjs.org/docs/messages/experimental-app-dir-config

import { NextRequest, NextResponse } from 'next/server'; export const config = { matcher: ['/:path*'], }; export function middleware(req: NextRequest) { // 開発時では認証をスキップ if (process.env.NODE_ENV === 'development') { return NextResponse.next(); } // 環境変数が設定されていない場合は認証をスキップ if (!process.env.BASIC_AUTH_PASSWORD) { return NextResponse.next(); } const basicAuth = req.headers.get('authorization'); const

こんにちは、よしお (@yoshio__25) です。 Webフロントエンジニアは皆さん、下のエラーを一度は目にしたことがあるのではないでしょうか。 CORSとは MDN に以下のように記述されています。 オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。 つまり上のエラーメッセージは、異なるオリジンへのアクセスをしようとしたときに、セキュリティ上の理由からそのポリシーに反しているため、リクエストをブロックした旨を伝えています。 このポリシーはもちろん製品の開発時にも適用されます。 つまり開発用の localhost サーバーを立てて、そこから開発

sumirenです。 2023年5月5日、ついにNext.js App Routerがstableになりましたね！ おめでとうございます！！ありがとうございます！！！ 今から本番で使うのが楽しみで待ちきれません。 13.4のリリースではstableの宣言とともに、目玉機能としてServer Actionsが来ています。Data Fetch（というか、もはやData Handling的なもの）の機能の一部として、とても興味深いです。 さて、Server Actions自体の解説は他の方に任せるとして、リリースノートには以下のような一文があります。 Server Actions in Next.js have been designed for deep integration with the rest of the data lifecycle, including the Next.js

モチベーション Next.js v13出ましたね。 RFCで出ていた内容も多いので、アップデート内容が予測していた方もいらっしゃると思いますが、僕自身は詳しくコードをながめたことはなかったのでみていこうと思います やること Turbopack New Next.js Router やらないこと next/image @next/font next/link Turbopack（α） Turbopackとは？ Rustで作られたJavaScript/TypeScriptのバンドラー 圧倒的なビルドスピードとキャッシュ機構が売り

仕事でNext.jsにCSSフレームワークのTailwindを導入したので、それのやり方をまとめています。 パッケージのインストール まずはTailwind CSSを導入するため、以下3つのパッケージをインストールします。 tailwindcss postcss autoprefixer # npm の場合 $ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest # yarn の場合 $ yarn add -D tailwindcss postcss autoprefixer postcss-nested

import Footer from '@/components/Footer'; import Header from '@/components/Header'; import { ReactNode } from 'react'; import '@/styles/globals.css'; export default async function Layout({ children }: { children: ReactNode }) { return ( <> <Header /> <div className="container">{children}</div> <Footer /> </> ); } これは app/layout.tsx なので、何もしなければ全ページで使われるレイアウトである。 v13.4.4現在、ローカルでは表示できるし、ビルドも通ってしまう。 だ

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

Server Componentとuseフック Next.js 13において、コンポーネントはサーバー側でレンダリングされるサーバーコンポーネントがデファクトになりました。 一方、 先日Reactに追加されたuseフックは、再レンダリングが走らないサーバーコンポーネントでは特に意識せずに利用する事が出来ますが import { use } from 'react' async function getTodoList() { // https://jsonplaceholder.typicode.com/ const response = await fetch('https://jsonplaceholder.typicode.com/todos'); const result = await response.json(); return result; } export defaul

Next.js 13 App Router の cache 周りを理解したい記事シリーズです。 Automatic fetch() Request Deduping revalidate ← この記事 fetchCache (後日公開) Incremental Static Regeneration / ISR Next.js では、もともとレンダリング方法のひとつとして、Incremental Static Regeneration = ISR が利用可能でした。 静的なページ生成を前提としながらも、一定間隔を超えた時点でページを再生成してくれる仕組みで、間隔は、getStaticProps の revalidate オプションで指定可能でした。 export async function getStaticProps() { const res = await fetch("https

この記事について この記事は、Advanced Features/Debuggingの記事を和訳したものです。 記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。 デバッグ このドキュメントでは、Chrome DevToolsまたはVSCode debuggerを使用して、ソースマップを完全にサポートしながら Next.js のフロントエンドとバックエンドのコードをデバッグする方法について説明します。 この方法では、まずターミナルで Next.js のアプリケーションをデバッグモードで起動し、そこにインスペクタ（Chrome DevTools または VS Code）を接続する必要があります。 Next.js アプリケーションのデバッグに必要なのは、Node.js デバッガを公開し、インスペクタークライアントを起動することだけなので、他にも方法があるか

はじめに メーカー系企業のコーポレート部門で業務システムを作っているモンゴルと申します。 趣味やPJでNext.jsを使っているのですが、チュートリアルを読んだ後に、とりあえずやってみようの精神で、4つほど動くものを作ってきました。 ただ、この中でディレクトリ構成についてもやもやを感じるようにもなりました。 Next.jsに触れ始めてから半年ほど経過したこともあるので、このタイミングでよりよいディレクトリ構成について整理していきたいと思います。 今までずっとサーバーサイドのエンジニアだったので、間違った認識等あるかと思います。優しくご指摘いただけると幸いです。 実装を初めて何が問題になったか？ 使用するデータベースやSaaSが変更になる可能性もあったので、外部へアクセスするコードはlibフォルダにまとめるようにしようと考えて実装をはじめました。 （Next.jsのチュートリアルのコードにお

Next.js に Prisma ORM を導入する方法について解説します。 Next.js プロジェクトの雛形を作成 $ mkdir hello-next-app && cd hello-next-app $ npm init -y $ npm install next react react-dom --save $ npm install typescript @types/node @types/react --save-dev $ code src/index.tsx

はじめに GWに入り、5日連続のVercelによる新機能の発表が始まりました。早速初日(2023 5/1)からすさまじい機能の発表がありました。 初日に発表されたのは、以下の三つのStorageサービスです。 Vercel Postgres Vercel KV Vercel Blob 今回はこの中のVercel Postgresを実際に使いながら、ClientからServerまで網羅しためっちゃ簡易的なフルスタックなアプリケーションを、実用性の側面も加味してPrisma + Next.jsで作っていこうと思います。

はじめに 先日、3つの Storage サービスが公開されました🎉 Vercel KV Vercel Postgres Vercel Blob その中でも個人的に気になった Vercel Postgres を試してみようと思います。 環境構築 Vercel Postgres を試すためのテンプレートがいくつか用意されています。（ありがたい...） Vercel Postgres Next.js Starter Vercel Postgres + Kysely Next.js Starter Vercel Postgres + Prisma Next.js Starter 上記は全て Next.js 用のテンプレートですが、他にも Sveltekit、Nuxt 用のテンプレートも用意されています。今回は Prisma を使いたかったので、 Vercel Postgres + Prisma

主な使用サービス/ライブラリは以下です。 Next.js …アプリケーションのフレームワーク Vercel …デプロイ先 PlanetScale …サーバーレスDB(MySQL)。ORMにはPrismaを使用 Upstash …サーバーレスでRedisを使えるやつ Cloudflare R2 …画像のアップロード先 Open AI API ここに落ち着くまでに紆余曲折あったので、少し詳しく説明しておきます。 Next.js on Vercel 利用しているフレームワークはNext.jsです。クライアントからのデータの取得・更新リクエストはAPI Routesから受け付けるようにしています。 アプリケーションのデプロイ先はVercelにしました。最初はNext.js on Cloudflare Workersをやろうとしたのですが、辛い部分が多くて断念しました。 余談）なぜNext.jsをC

Supabaseをどこで知ったか？ Vercel動かすNext.jsでDB使いたかった Vercelのインテグレーションリストを見ていたら、Supabaseを見つけた そこで知った。 Supabaseとはどんなもの？ PostgreSQLのBaaS オープンソース オープンソースだけどマネージドホスティングサービスがある 無料のホスティングプランもある データベースに対応したREST APIをはやしてくれる オープンソースのPostgRESTを使っている Firebaseのようなリアルタイム要素があるっぽい ファイルを保存するストレージ機能もあるっぽい Firebaseの代替と謳うが、FirebaseはNoSQLで、SupabaseはRDBなので、ワンタッチで置き換えできる代物ではない 簡易的な認証・認可の仕組みが備わっている サインアップ、メールアドレス確認、ログイン、ログアウト、パスワ