Next.js に next-sitemap を導入して超手軽にサイトマップ sitemap.xml を生成しよう | fwywd（フュード）powered by キカガク
fwywd のサイトマップ を見ていただくとわかりやすいのですが、以下のようなサイトマップ sitemap.xml がビルド時に自動的に生成されるところを目標とします。 Next.js を使っている人の記事をいくつか調査したところ、特に細かいカスタマイズが必要のない段階では、next-sitemap が一番楽そうだと判断したためです。 また、パッケージでは next-sitemap（スター数 576）と nextjs-sitemap-generator（スター数 434） が有名なようです。 今回は手軽に導入できるといった点以外にカスタマイズ性にはこだわりがなかったため、スター数の多い next-sitemap を採用することにしました。
Next.js (JavaScript/TypeScript) に Tailwind CSS を導入する方法 | fwywd（フュード）powered by キカガク
どーも、入田 / ぐるたか @guru_taka です！ 本記事では Next.js に Tailwind CSS を導入する方法を紹介します。また、VS Code で Tailwind CSS での開発がしやすくなる Tips もまとめていますので、参考にしてみてください！ バージョン情報 node：15.11.0 react: 17.0.2 react-dom: 17.0.2 next: 11.0.1 autoprefixer: 10.2.6 postcss: 8.3.5 tailwindcss: 2.2.4 Tailwind CSS とは？ Tailwind CSS とは、ユーティリティファーストの CSS フレームワークになります。CSS フレームワークで有名な Bootstrap のように、デザインが整ったコンポーネントがあるのではなく、デザインを整えるときに便利かつシンプルな機
Next.js (TypeScript) に ESLint と Prettier を導入し、コードを綺麗に保とう | fwywd（フュード）powered by キカガク
どーも、入田 / ぐるたか @guru_taka です！ 本記事では Next.js (TypeScript) を環境構築し、ESLint（読み方：イーエスリント）と Prettier（読み方：プリティア）を導入する方法を紹介します。Next.js のバージョン 11 に対応しており、デフォルトで搭載されている ESLint の設定ファイルをベースとしています。 ESLint と Prettier を駆使することで、コードが綺麗になるため、導入することを強くオススメしたいです。本記事では、VS Code 上で、ESLint で構文解析しながら、ファイル保存時に ESLint + Prettier によるコード整形する方法をハンズオン形式でまとめています。
Next.js の Ver.11 で発表された新機能を１分で読めるまとめ | fwywd（フュード）powered by キカガク
日本時間で本日発表された Next.js の Ver.11 ですが、これまでの Ver.10 で開発していた私目線でまとめてみました。 すぐ使える嬉しい変更点 next/image => 面倒だった width と height から解放！ Conformance => 実装が UX 的に良いか ESLint と統合して確認できるように！ Script Optimization => 外部の JS ファイルのパフォーマンスを調整可能に！ 使う人を選びそうな変更点 Next.js Live => みんなでリアルタイムに開発しよう！ CRA Migration => create react app ユーザーからの移行を楽に！ 後ろ側の変更点 Improved Performance => 開発者体験さらに上がったよ！ Webpack 5 => Webpack 4 から 5 がデフォルトに！
Next.js + Tailwind CSS に Storybook を導入する方法 | fwywd（フュード）powered by キカガク
# ディレクトリ構成 # Storybook の設定ファイル .storybook ├── main.js └── preview.js # Storybook のデフォルトファイル # baseUrl が src ディレクトリの場合は /stories -> /src/stories /stories ├── Button.stories.tsx ├── Button.tsx ├── Header.stories.tsx ├── Header.tsx ├── Introduction.stories.mdx ├── Page.stories.tsx ├── Page.tsx ├── assets │ ├── code-brackets.svg │ ├── colors.svg │ ├── comments.svg │ ├── direction.svg │ ├── flow.svg │
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js における環境変数 (env) の基本的な設定方法 | fwywd（フュード）powered by キカガク
Next.js (JavaScript/TypeScript) に Chakra UI を導入する方法 | fwywd（フュード）powered by キカガク
Tailwind CSS のカラーパレットを拡張する方法 | fwywd（フュード）powered by キカガク
React / Next.js に algolia を導入して検索機能を追加しよう | fwywd（フュード）powered by キカガク
Next.js に feed を導入して RSS と Atom のフィードを生成しよう | fwywd（フュード）powered by キカガク
Next.js 製ブログページのパフォーマンスを向上させるために実施したこと | fwywd（フュード）powered by キカガク
react-scroll を導入し超簡単に画面内のスクロールを実装しよう | fwywd（フュード）powered by キカガク