【2024年版】Next.jsプロジェクトを始める前に押さえたい！CSS フレームワーク5選の総合比較
はじめに Next.jsを使用してアプリケーションを開発する際、適切なCSSフレームワークの選択は重要な決定の一つです。 私自身、仕事でNext.js + MUI(Material-UI)を使用した経験がありますが、改めて各CSSフレームワークを比較し、Next.jsプロジェクトに最適なフレームワークを探ってみます。 CSSフレームワークの候補 ネット上の技術記事やGithubのスター数を踏まえ、Next.jsと組み合わせるのに人気の高いCSSフレームワークとして、以下の5つを候補に挙げました。 Tailwind CSS CSS Modules Styled Components Chakra UI Material-UI (MUI) それぞれのフレームワークについて、特徴とコード例を見ていきましょう。 1. Tailwind CSS Tailwind CSSは、「ユーティリティファースト
App Router入門 Next.js App Router@Recruit bootcamp2024
2024年度リクルート エンジニアコース新人研修の講義資料です
2024年度リクルート エンジニアコース新人研修の講義資料です
Next.jsにshadcn/uiを導入する
はじめに 本記事ではNext.jsにshadcn/uiを導入する手順を記載します shadcn/uiとは shadcn/uiは、2023 JavaScript Rising StarsのReact Ecosystemで1位を獲得した今注目のUIコンポーネント集です。 これまでのUIコンポーネント違うのはライブラリとして導入するのではなく、コピー&ペースとして使うことを特徴としています。 Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. This is NOT a component library. It's a collection of re-usable components that you can co
こんにちは。音楽ディレクターの村上といいます。 なつかしの「メイソンリーレイアウト」 一時期（たぶんjQuery時代）、「メイソンリーレイアウト」って流行りましたよね。 Pintarestのように複数カラムを隙間なく上から埋めていくレイアウトのことです。 利点はスペースの節約になることで、画像ギャラリーなどでよく使われると思います。 ただしこのレイアウトはCSSGridだけでは不可能で、クライアントサイドで一度高さを算出しないといけないので、SSRやSSGと相性が悪いです。また、モバイルファーストだと関係ないのと、 パフォーマンスの問題もあり、今は割と敬遠されている気がします。 （ただし、CSSの機能にMasonry Layoutを実装しようという動きもあるようです。これが取り込まれれば、Javascript不要になります） 令和でも使いたい！ 今回、佐々木恵梨という担当アーティストの公式
Next.jsでMarkdownを表示
$ yarn create next-app nextjs-tex --typescript --eslint --src-dir --import-alias "@/*" yarn create v1.22.19 warning package.json: No license field [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Installed "create-next-app@13.1.6" with binaries: - create-next-app ✔ Would you like to use experimental `app/` dir
概要 本記事では、Docker環境上におけるNext.jsのオプション--experimental-httpsが使用できない方向けの回避処置の解説になります。 弊環境 ホスト：Ubuntu22.04 Docker : 26.0.2 Image : node:21.7.3-bullseye 本題 先行事項 コンテナにrootユーザでは入ればおそらく普通に動きます。（未実証） ですが、nodeのオフィシャルでは「コンテナはrootで動かすな！nodeユーザ使え」と言われてるので、大人しくそれに従いましょう。
Next.jsでウェブサービスを運営していると、ページの構成を変更したい場合や古いコンテンツを新しいページに統合したい場合があります。この記事では、Next.jsで特定のページを削除し、そのURLから他のページへリダイレクトする方法を紹介します。 ステップ 1: 不要なページの削除 まずは、削除したいページのファイル（例えば pages/old-page.js）をプロジェクトから削除します。ファイルを削除することで、そのページへのアクセスができなくなります。 ステップ 2: リダイレクトの設定 削除したページへアクセスしたユーザーを新しいページに自動的にリダイレクトするには、next.config.js ファイルを編集します。このファイルがプロジェクトに存在しない場合は、プロジェクトのルートディレクトリに新しく作成してください。 module.exports = { async redir
Next.jsの基礎知識
概要 Next.js に関する基礎知識を解説してみます。 Next.js のメリット Server-side Rendering(SSR)のビルトイン 通常の React アプリの場合、HTML を表示すると<div id="root"></div>といったエントリポイントになる HTML のみが表示されます。 React はクライアントサイドライブラリなので、全てのレンダリングはブラウザ上で行われるためです。 画面をリロードすると一瞬白いページが見えてちらつきが発生します。 また、SEO の観点では、検索エンジンは空のページのみを返してしまい検索エンジンに取り込まれない問題があります。 SSR を用いることで、サーバ側がその URL の表示に対して生成された HTML をレスポンスすることができます。 Next.js には SSR 機能が組み込まれています。 File-based Rou
DockerでNext.jsの開発環境を作成した際、Fast Refreshが効かない事象に遭遇しました。 Fast Refreshとはいわゆるホットリロードのことで、 ページの中身を書き換えたときにいちいちリロードしなくても ファイルの変更をブラウザの表示に反映してくれる機能のことです。 Docker上でFast Refreshを動作させる方法はいくつかありますが、 今回は、私が調べて見つけた方法の中で、 上手くいった方法、逆に上手くいかなかった方法、 そして、上手くいった方法の中でメリットデメリットを簡単に比較検討したうえでどれを選べばいいのか私の意見を述べたいと思います。 開発環境 Next.js: 14.2.5 React: 18.3.1 node.js: 20.9.0 npm: 9.2.0 Windows: 11 原因 おそらく、「WSL2はWindowsのファイル変更イベントを
Next.jsでブログを作った
Next.jsでブログを作った@nedewApr 4, 2021nextjsmdxblog
はじめに Reactはクライアントサイドレンダリングを得意とするライブラリで、サーバーサイドレンダリング（SSR）も実装可能です。しかし、ReactでSSRを実装しようとするとたくさんの設定や追加のコードが必要になってきます。 そこで登場したのがNext.jsです。 Next.jsはReactをベースにしたフレームワークで、以下の特徴があります。 簡単なSSR実装 パフォーマンス最適化 ファイルベースのルーティング 静的サイト生成（SSG）とインクリメンタル静的再生成（ISR） 開発環境の向上 ビルトインのCSS/Sass支援 これらの機能により、Next.jsはReactのみを使用する場合と比べて、開発効率、パフォーマンス、SEOの面で大きな利点があり、そのため多くの実務プロジェクトではReactとNext.jsが一緒に使用されています。 つまり、React開発者にとってNext.jsの
next.jsをPages RouterからApp Routerへ移植する際、next/routerのuseRouterを置き換える必要が出てくる。 クエリやパラメータを取得するような処理をコンポーネントで書いていると、共通のコンポーネントでちょこちょこ困ることがあった この置き換えにあたって、App Routerにエイヤで移さず Pages Routerの上で利用しているコンポーネントのnext/routerのuseRouterをnext/navigationのuseParamsやuseSearchQueryに置き換える 置き換えが終わったらApp Routerへ移植する という手順が踏めれば比較的安全に移行ができ、マイグレーションの手助けになりそうだと考えた next/navigationのhooksはPages Routerでも使って良いのか？ 上記のようなマイグレーションパスについ
BLOG ブログ ホーム ブログ 【Next.js】App Routerの特徴とPages Routerとの違いについて Next.js 13.4から「App Router」というルーティング機能が安定版（Stable）となりました。 Next.js 13.4 ルーティングとは、Webサイト内で特定のURLにアクセスした際に表示するページを決定する仕組みのことです。 例: /aboutにアクセスしたら、Aboutページを返す など この記事では「App Router」の特徴や、以前までのルーティング機能「Pages Router」との違いについて解説したいと思います。 ※2024/05時点のNext.js最新バージョンは14.2です。 はじめに Next.jsはReactのフレームワークとして、様々な機能が実装されています。 その中の1つに「ルーティング」があり、ファイルシステム（ディレク
はじめに 注意事項 Docker, Next.js, nginxは1ヶ月触った程度の初学者 あくまで開発中のテスト用の構築 環境 OS:Ubuntu 20.04.6 Docker: 26.1.3 Docker Compose: 2.27.0 node: 21.7.1 経緯 ブラウザ上でマイクやカメラといった機能を使用したい場合、https通信でアクセスしなければいけません。 localhostで試している分にはブラウザがよしなに対応してくれたり、Next.jsの--experimental-httpsオプションがあるためそこまで困りませんが、スマートフォン上のブラウザから試してみたい場合や、実ネットワークを介して試してみたい場合などはhttps通信でのアクセスが必須です。 そこで、nginxをリバースプロキシとしてNext.jsアプリケーションを配信しつつ、nginxへのアクセスを自己署名
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js 研修 2024
Next.js14 + ReactでSSR/SSG対応のメイソンリーレイアウトを実装する
Docker環境上のNext.jsをhttpsに対応させる - Qiita
Next.jsで特定のページを削除してリダイレクトの設定をする
DockerでNext.jsの開発環境を作成した際、Fast Refreshが効かない問題を解決
Next.jsのレンダリング方法「CSR/SSR/SSG/ISR」について図解する - Qiita
next.jsのPage Routerでnext/navigationはどの程度使えるのか？
【Next.js】App Routerの特徴とPages Routerとの違いについて
Docker上にNext.js+nginxサーバーを構築し、httpsでアクセスできるようにする - Qiita