Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。
This content is not yet available in English - I'm working on it. next/font とは カスタムフォントを含むフォントを自動的に最適化し、プライバシーとパフォーマンス向上のため外部ネットワークリクエストを削除するものです。 Next.js v13 で追加になった app ディレクトリとそれ以前の pages フォルダでも機能します。 ここでは app ディレクトリでの使用方法について紹介します。 構成要件 next: 13.1.6 @next/font: 13.1.6 Google Fonts の場合 最高のパフォーマンスのためには Variable fonts の使用が推奨されています。Variable fonts でなくても使用可能です。 Demo & Source (CodeSandbox) 基本的な書き方 app
Next.js×TypeScript×microCMS×MantineUI×Netlifyでブログを作成したのでまとめと感想 はじめに この記事は、タイトルに記載の通りの技術スタックで趣味の芝生管理用のブログを作成したので、簡単にまとめと感想を書いておこうと思います。 実際のブログはこちら GitHubリポジトリはこちら（参考になった方は🌟をポチッと🙏） ブログ作成の動機 普段業務でNextjs(React)を触っているがSSRする必要がないアプリケーションということもあり、ファイルルーティングの機能くらいしか触っていなかったため、SSGやSSRの機能をちょっと触っておきたかったのと、最近流行りのJAMStack構成をmicroCMSを用いて経験しておきたかったという2点が主な動機です。 あと、勤めている会社でホームページを作り直す話があがっていたので、JAMStack構成を提案するた
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
Material UI の v5 がリリースされました。 v5 から MUI として新しくリニューアルされました。 公式サイトもリニューアルしていますね。 v5 から内部で使用されているスタイリングソリューションが Emotion か styled-components か選択できます。 今回は Next.js/Typescript プロジェクトに Material-UI/Emotion を導入します。 また今回から新たに追加された MUI の新機能や変更された記述方法を試してみます。 今回ソースは基本的には公式 Github の example を参照致しました。 環境macOS Big Sur 11.15.2Next.js 11.1.2Typescript 4.4.3npm 7.7.6yarn 1.22.4Next.js のプロジェクトを作成以下のコマンドを実行して Typescrip
最近の流れを見ていての感想文なので、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
おはこんハロチャオ～ ということで最近Next.js13でポケモン関連のwebアプリを作ったのですが、 Next.js13のApp Directryを触れるのが初めてだったので苦戦。。。 特にAnalyticsは避けて通れないのにもかかわらず日本語の情報が不足している感じがしたので、解決方法をお伝えできればと思います ちなみに作ったのは、ポケモンのタイプ相性を詳細に知れるサービスです バトル向けに使いやすい機能を追加していくつもりなので、よかったら見ていってください 前提 Google Analyticsを導入した回数もそんなに多くないので、前と同じように調べながら進めていました。 とりあえず、このようなサイトを使ってあーこんなのあったなで進めていきました 一応、これはClient Componentを使うべきだと思ったので、layout.tsxから切り離して作ったりしました 周辺はこんな
こんにちは、よしお (@yoshio__25) です。 Webフロントエンジニアは皆さん、下のエラーを一度は目にしたことがあるのではないでしょうか。 CORSとは MDN に以下のように記述されています。 オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。 つまり上のエラーメッセージは、異なるオリジンへのアクセスをしようとしたときに、セキュリティ上の理由からそのポリシーに反しているため、リクエストをブロックした旨を伝えています。 このポリシーはもちろん製品の開発時にも適用されます。 つまり開発用の localhost サーバーを立てて、そこから開発
![[Next.js] API リクエストの CORS エラーを回避する](https://cdn-ak-scissors.b.st-hatena.com/image/square/a69f70195747b9cd7a4b941bb33d01900201f22b/height=288;version=1;width=512/https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttps%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--rw_CutSb--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BNext.js%25255D%252520API%252520%2525E3%252583%2525AA%2525E3%252582%2525AF%2525E3%252582%2525A8%2525E3%252582%2525B9%2525E3%252583%252588%2525E3%252581%2525AE%252520CORS%252520%2525E3%252582%2525A8%2525E3%252583%2525A9%2525E3%252583%2525BC%2525E3%252582%252592%2525E5%25259B%25259E%2525E9%252581%2525BF%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252582%252588%2525E3%252581%252597%2525E3%252581%25258A%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzI2MTFkMTE3MTUuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Next.js のドキュメントへようこそ！ Next.js を初めて使用する場合は、学習コースから始めることをお勧めします。 学習コースは翻訳されていません。 インタラクティブなクイズによる学習コースでは、Next.js を使うために必要なすべての知識を習得できます。 Next.js に関連事項する質問がある場合は、GitHub Discussions のコミュニティーでなんでも質問してください。 システム要件 Node.js 12.22.0 または、それ以降 MacOS, Windows (WSL を含む)、そして Linux をサポート 自動セットアップ すべてを自動的にセットアップする create-next-app を使って、Next.js アプリを作成することをお勧めします。プロジェクトを作成するために、次を実行します: npx create-next-app@latest #
取り急ぎメモ 何をしたかったかメモ とあるサイト（Nginx+WordPress）のサブディレクトリだけをNext.jsで動かしたかった SEOも考えないといけないので、hoge.vercel.app のドメインでアクセスできなくしたかった やったこと next.config.js を修正 { ... basePath: isProduction ? SUB_DIRECTORY : '', assetPrefix: isProduction ? SUB_DIRECTORY : '', // Imageコンポーネントを使う場合は basePath をsrcで指定しなければならない publicRuntimeConfig: { basePath: isProduction ? SUB_DIRECTORY : '', } ... } routing -> 問題なし JSまわり -> 問題なし i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
