Libx Awesomeリスト

    このページの内容

    Awesome Next.js

    Next.jsを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

    目次

    コミュニティ

    基本資料

    記事

    ボイラープレート

    • Kaiforge Lite - 無料の管理ダッシュボードテンプレート。Next.js 14、Tailwind CSS、TypeScript、ダーク／ライトモード、すぐに使える5ページを備えています。MITライセンス。Demo
    • Kaminari Template - パワフルなNext.jsとTailwind CSSテンプレート。開発者の体験を意識して構築されています。Husky、CommitLint、Prettier、Eslintなど、各種設定を含んでいます。✨
    • Next.js, Strapi Portfolio Starter – ⚡️ Next.js、Strapi、Tailwind CSSを使った現代的なポートフォリオスタートアップ。自動化されたXMLサイトマップ、JSON-LDスキーマ、OpenGraphメタデータ、スパム保護付きの連絡フォームを備えています。
    • Next.js Static Blog - Cosmic Headless CMSを活用したNext.js静的ブログ
    • NextJS Headless CMS Powered Blog Starter
    • Next.js App with AWS Lambda - Apex Upを使ってNext.jsアプリをAWS Lambdaにデプロイ
    • Nitro 🚀 - Nextjs、Material-UI、TypescriptおよびAuth0を使ったPWAの例 💗
    • Next & Now 2.0 Typescript template - Serverless、TypeScript、Jest、GitHub CI、SCSS、Prettierを備えたボイラープレート
    • Next Right Now - 柔軟な本番環境向けボイラープレート。Next.js 9とVercelを基盤に、Sentry、Cookie、Amplitude、Emotion、Font Awesome、GraphQL/GraphCMS（Apollo）、Bootstrap（Reactstrap）、i18next（Locize）、Jest、Cypress、GitHub Actionsを設定済みで、TypeScriptと**B2BマルチテナントWebアプリ（モノリス）**に対応します
    • Next Graphql Apollo Typescript_Boostrap - Pobocha - React、GraphQL、Next.js、Apollo、SCSS、TypeScript、Prettier、ESLintを備えたボイラープレート
    • Next & Vercel Typescript template - Serverless、TypeScript、Jest、GitHub CI、SCSS、Prettierを備えたボイラープレート
    • NextJS in Firebase with Bootstrap - FirebaseでBootstrapを用いたNextJSアプリのホスティング。Cloud Functionsを使用。
    • Next Simple Starter - Next.jsとReduxを使ったシンプルなPWAボイラープレート。
    • NextJS Starter - Next.jsのスタートアッププロジェクト。メール認証とOAuth認証を備えています。
    • nextjs-starter - SEO最適化されたNext.js 10スタートアップキットテンプレート。React 17 + TypeScript + Tailwind CSS 2 + React Query 3 + (GitHub Auth + Passwordless Auth) を使用（NextAuth.jsとFauna DB）、ESLint、Prettier、プレコミットハンドル（Husky）を備えています。ページごとに異なるレイアウトを設定可能です。
    • RAN! - GraphQL、SSR、ホットリロード、CSS-in-JS、キャッシュなどを備えた本番環境向けボイラープレート。
    • Next Simple Blog - Next.jsで構築されたシンプルなMarkdownベースのブログ。静的エクスポートをサポートしています。
    • phox - 静的フォトブログの作成。
    • Next Express Bootstrap Boilerplate - Next、Express、react-bootstrap、SCSS、SSRを使ったフルスタックアプリのボイラープレート。ESLint対応。
    • Next Blog Firestore - Next.js、Firebase Firestore、styled-components、mobx-state-treeで構築されたシンプルなCMS付きブログ。
    • Next Redux Starter - Express、Redux、PostCSSを用いたNext.jsスタートアップ。
    • NextJS Redux-Wrapper Material-UI - 🤓 ReduxとMaterial UIを使ったNextJSの標準テンプレート
    • Staart - 😎 活発に維持されているNext.jsコンポーネントライブラリであり、OAuthを基にした機能ユーザーアカウントをすぐに使えるようにする極小テンプレート
    • NextJS TypeScript Starter Kit - :tada: TypeScript + NextJS, Styled-jsx, Redux, PostCSS, 設定可能なSEO
    • Next Boilerplate - 外部CSSとSass + どこからでも画像をインポート + PrettierとESLint + 環境変数など多くの機能
    • next-starter - sass (.scss)とpostcssが組み込まれた、シンプルで完全なテンプレート
    • Typescript Monorepo Next Example - 最小構成のNext.js＋TypeScriptモノレポ
    • tomimick/tm-nextjs-starter - 基本的なCRUD、Axios／localStorage、MobX、Sass、静的サイトエクスポート、ライブデモを備えた最小構成のスターター
    • csprance/next-smrt - Redux、styled-components、material-ui、TypeScriptを備えた極小テンプレートで、カスタムExpressサーバーを搭載
    • Nextron - ElectronとNext.jsアプリのジェネレーター ⚡
    • next-boilerplate - TypeScript、Redux、Express.js、Sass、Css、EnvConfig、リバースプロキシ、バンドルを備えた、構成が整った生産用Next.jsテンプレート
    • Oh My Fullstack - フルスタックウェブアプリケーションの骨格（Next.js、Redux、RxJS、Immutable、Express）
    • Next-Postgres-With-Typescript - Next 7.0.2 + Sequelize 4/Postgres + TypeScript + Redux + Passport Local Auth + Emotionで構成されたフォーラム風のフルスタックウェブアプリ
    • Next.js with Express and Babel - ExpressコードおよびNext.jsコードをBabelでトランスパイルしたい開発者向けのアプリケーションの骨格
    • next-postgres-graphql - Postgres（Next.js、Postgres、GraphQL）を使ったGraphQLでSSRを実行するNext.jsウェブサイトの作成
    • nextjs-mongodb-app - Next.js 9とMongoDBを使ったフル機能アプリ（認証を含むなど）
    • react-next-boilerplate - :rocket: NextJSのプロジェクト設定を簡素化し、開発者のベストプラクティスと人気ライブラリを備えたベース
    • The-Nextjs-starter - typescript + redux + styled-components + react-testing-library + eslint + fontawesome
    • The Knests Stack - PostgreSQL、Knex.js、NestJS、Next.js、GraphQL、React、Material-UI、Docker、設定済みGitLab CI/CDを備えたフルスタック／ハッカソン向けスターター
    • Devii - Next.js、React、TypeScriptで構成されたMedium風の開発者ブログスターター。Markdown表示、シンタックスハイライト、SEO／メタタグ、RSSフィード生成を標準装備
    • Nextjs Blog Starter - 🚀 Next.jsフレームワークに基づいたブログのための最適なスタートコード。⚡️ Next.js、TypeScript、ESLint、Prettier、PostCSS、Tailwind CSSで作成
    • Next.js and Netlify Blogging Template - Netlifyスタックでブログサイトを構築するための、タグ、CMS、ショートコードなどの標準機能を備えた完璧なボイラープレート
    • Nextjs Apollo Nexus - Next.jsにおけるGraphQL Apolloクライアント・サーバー統合（コードファーストアプローチ）＋Nexusスキーマ
    • Nextjs Starter Peacock - 🦚 ソフトウェアエンジニアやデザイナーが、誇りに思える作品を示すための美しいNext.jsポートフォリオスタートアップ
    • Nextatic - 🌍 マルチ言語の静的ウェブサイトボイラープレート。Netlify CMS＋Next.js＋SCSS＋TypeScriptでユーザー編集可能なページとナビゲーションを実現
    • Sitemap generator for NextJS & StrAPI - 🦾 Expressによる追加サーバーがNext.jsと並行して動作し、STR APIからのリクエスト時にサイトマップ（インデックスサイトマップ）およびrobots.txtファイルを再生成
    • superplate - superplateはTypeScript、styled-components、SWR、Storybook、35以上のプラグインを含むNext.jsアプリを数秒で作成
    • Hydrogen - HydrogenはTailwindCSSとMDXを活用したNext.jsブログスタートアップテンプレート。すべての必要MDXショートコードが標準で備わっている
    • Next-Fire-Auth - Next.js＋TypeScript＋Tailwind CSS＋Firebase-auth＋React-Firebase-Hooksによるスタートアップアプリ用の素晴らしいボイラープレート
    • NextJS Chargebee Subscription - Chargebeeに特化したT3スタック。ユーザーサブスクリプション、認証、テストを統合。Prisma ORMで駆動
    • Next.js Enterprise - 高パフォーマンスかつ保守性の高いアプリ用のエンタープライズ級ボイラープレート。Tailwind CSS、RadixUI、TypeScriptなどを使って構築
    • Start UI [web] - 🚀 TypeScript、React、NextJS、Chakra UI、tRPC、Prisma、TanStack Query、Storybook、Playwright、Formizを備えた意見の強いUIスタートアップ
    • Kaiforge Lite - Tailwind CSS、ダークモード、複数の色テーマを備えた無料かつオープンソースのNext.js管理ダッシュボードテンプレート
    • A11y Starter Kit - アクセシビリティを最優先にしたNext.jsスタートアップキット。インクルーシブなウェブアプリ開発のベストプラクティスを提供。デモ: https://a11y-starter-kit.vercel.app/

    拡張機能

    • Next universal language detector - ブラウザとサーバーで動作する言語検出機能。ユニバーサルフレームワーク（例：Next.js）と併用されるように設計されている DEMO
    • Next Routes - Next.jsにおけるユニバーサルなルート名の実装
    • Next-Pkg - 拡張されたNext.jsサーバー（pkg対応）
    • Next Plugin Graphql - .graphqlおよび.gqlファイル用のNext.jsプラグイン（graphql-tagを使用）
    • Next With Apollo - Next.jsにおけるApollo GraphQL統合
    • Next SEO - Next.jsにおけるSEOを簡単に行う
    • Next-Sitemap - Next.jsにおけるサイトマップ生成
    • Next UserAgent - Next.js用のUserAgentパーサー
    • Next Cookie - Next.js用のCookieシリアライザおよびデシリアライザライブラリ
    • Nextein - Next.jsをベースにした静的サイトジェネレーター
    • next-mdx-blog - 任意のNext.jsベースプロジェクトにブログを簡単に追加
    • next-i18next - NextJsアプリケーションを翻訳する最も簡単な方法
    • next-routes-middleware - Next.js用のルーティングミドルウェア
    • Serverless Framework plugin for Next.js - サーバレスアプリケーションを簡単にデプロイ
    • Terraform For Next.js - Terraformを使ってアプリケーションをデプロイ
    • next-session - Next.js用のセッションミドルウェア
    • next-iron-session - Next.jsのステートレスセッションユーティリティ。署名・暗号化されたCookieを使ってデータを保存
    • Next PurgeCSS - unused CSSを削除するためのを簡単に統合 Purgecss
    • Next PWA - Workboxを用いたNext.js用のゼロ設定PWAプラグイン
    • flow-middleware - Next.jsにExpressミドルウェアを実行できるようにし、ネイティブオブジェクトを汚さない
    • next-connect - Next.js用のExpress/Connectと互換性のあるルーターおよびミドルウェア層
    • next-img - 最適化された画像を簡単に埋め込むためのプラグイン
    • next-auth - Next.jsおよびサーバレス用の簡単な認証
    • next-deploy - 🚀 AWSおよびGitHub Pagesへのデプロイを簡単に！
    • next-joi - _joi_でNext.js APIルートを検証
    • next-transpile-modules - node_modules内のコードをトランスパイルするNext.jsプラグイン。モノレポで便利
    • Destack for Next.js - ローカルに視覚的にランディングページを構築できるNext.js拡張
    • UseSIWE - React Hooks と Next.js の API ルートが、Ethereum によるサインインをアプリに簡単に追加できるようにします
    • Runtime Environment Variables for Next.js – CI/CD での環境変数の設定をやめ、クラウドネイティブなアプローチを採用してください
    • next-google-tag-manager – Next.js 13 以降に Google Tag Manager を簡単に追加できます
    • modal-layout-component - Next.js 用の軽量かつアクセシブルなヘッドレスモーダルレイアウト（フォーカストラップ付き）
    • next-api-decorators - タイプ付きの Next.js API ルートを作成するためのデコレーター。簡単なリクエストのバリデーションと変換をサポート
    • Vercel AI SDK - TypeScript 用のAIツールキット。React、Next.js、Vue、Svelte、Node.js でAIを活用したアプリケーションを開発できます
    • CopilotKit - AI コピロット、AI チャットボット、アプリ内AIエージェント向けのReact UIと洗練されたインフラ構成
    • ogimg.xyz - Next.js + Satori でVercel Edge上で構築された、10テンプレート、背景パターン、URL自動取得を備えたOG画像生成API
    • ShotOG - Cloudflare Workersで駆動された、Next.jsアプリ向けの動的OG画像生成API
    • Frontman - ブラウザ内に存在するオープンソースAIコードエージェント。視覚要素選択と英語のコード編集を可能にし、ホットリロードをサポート
    • @farming-labs/docs - シンプルなドキュメンテーションフレームワーク。1つの設定ファイルで構成、ゼロのボイラープレート。

    アプリ

    • API Status Check - 2,500以上のAPIとクラウドサービスをリアルタイムで監視するダッシュボード。Next.jsで構築され、Verc-El上でデプロイされています
    • DevToolKit - Next.jsで構築された無料オンライン開発ツール — JSONフォーマッター、JWTデコーダー、リグレックステスト、Base64/URLエンコーダー、ハッシュ生成器
    • CourseLit - Thinkific、Teachableなどへのオープンソース代替品
    • FIM Agent - Next.js + shadcn/ui ポータルフロントエンドを備えたAI駆動のコンネクターハブ。エージェント管理、コンネクタ設定、知識ベース、SSEストリーミングによるリアルタイムチャットを提供
    • FastUtil - 71以上の無料ブラウザベース開発ツール。クライアントサイド処理、20言語対応、サインアップ不要。Next.js App Routerとshadcn/uiで構築されています
    • Feednext - オープンソースのソーシャルメディアアプリケーション
    • NextJS GOT - ゲーム・オブ・スローンズのキャラクターを紹介するシンプルなNext.jsアプリケーション
    • Relate - マインドフルネスコミュニティ — React、GraphQL、Next.js
    • Password - 1パスワード、正しい方法
    • Next Todos - Next.jsで書かれたタスク管理リスト
    • Hacker News - Another Hacker News が Next.js で書かれた
    • Jet Chat - Jet と Next.js を使ったチャットデモ
    • Nextgram - Next.js v2 のサンプルアプリ（機能を紹介するため）
    • Rauchg Blog - Next.js の核心開発者によるブログ
    • Next JPH - Next.js で作成された JsonPlaceholder サンプルアプリ
    • Mailto - HTML メールリンクの簡単な実装
    • Plate - すべてのタスク管理アプリを統括するタスク管理アプリ
    • Dashboard - カスタムウィジェットで自作チームダッシュボードを作成
    • Snape - トーテンを検索・ストリーミング・ダウンロードするトーテンクライアント
    • Trello Resume - Trello のデータを高速読み取り情報に変換
    • Server Authentication with JWT - サーバー認証、バリデーション前にはレンダリングを防ぐ
    • Alexander Kachkaev’s website – Next.js、GraphQL、Docker および Kubernetes を使って構築された個人用ホームページ。Apollo Client、react-intl、styled-components および recompose を使用。Docker イメージは GitLab CI で自動的にビルドされる。
    • Cookie handler with server render - サーバーレンダリングに対応したクッキー処理。レンダリング前にクッキーにアクセスできる
    • Gank - Next.js アプリで gank-api、mobx および antd を使用
    • Decoupled CMS example with GraphQL and Next.js
    • Mozilla VR Home - Mozilla VR ホームページ
    • Elton John’s website - エルトン・ジョンのウェブサイト
    • IOTA’s Data Market Place - IOTA マーケットプレイス
    • magicleap.com - Magic Leap
    • NPM.js Search Page - NPM の検索ページ
    • Docker Success Center - Docker成功センター
    • Urteile & Gesetze - ドイツ法的情報システム（GPLv3ライセンス付き）
    • TikTok’s HomePage - TikTokのホームページ
    • njt.now.sh - npmで🐸にジャンプ（あなたが夢見たパッケージナビゲーションショートカット）。一部は静的レンダリング、一部はラムダでデプロイ。 github repoへの各コミットごとにNow統合により自動更新。
    • caseconverter.pro - テキストケース変換ツール。
    • Tottem - NextJs / Auth0 / Apollo Tools / Prisma2で構築された、スターリングなブックマークマネージャー
    • Slow TV Map - リラックスする仮想体験を発見する楽しい方法。Next.js + Chakra UI + MySQLをVercelでホスティング。
    • Twitter Clone - Next.js + T3スタック + NextAuth + Supabase + Prismaで構築されたツイッタークローン。
    • Taxonomy - Next.js 13サーバーコンポーネントを使用した例アプリ。
    • shadcn/ui - あなたのアプリにコピー＆ペーストできる、美しく設計されたコンポーネント。
    • StorageBox - GoとNext.jsで構築されたシンプルなファイルストレージサービス。
    • Taskade - リアルタイム共同編集、AIエージェント、プロジェクト管理、ワークフロー自動化を備えたチーム向けAIアプリケーション。

    書籍

    • Hands On Next.js - Reactアプリケーションにおけるユニバーサル（サーバー）レンダリングについての実用的なフルスタック書籍。
    • Next.js Quick Start Guide - Next.jsを使ってユニバーサルJavaScriptアプリケーションを作成・構築・デプロイ。
    • The Next.js Handbook - Reactアプリケーションにサーバーサイドレンダリングを透明に処理するためのフロントエンドReactアプリケーションの構築。
    • Serverless Web Applications with React and Next.js - Reactアプリケーションでデータベースにアクセスし、ユーザー認証を行うためにNext.jsのサーバレス機能を使用。
    • Cut Into The Jamstack: Build a SaaS with React and Next.js - Next.js、Prisma ORM、Cloudinary API、Chakra-UIおよびReact Hook Formを使って、ソフトウェアアセンブリサービスアプリケーションを構築。
    • Real World Next.js - Next.js、生産用Reactフレームワークを使って、スケーラブルで高性能かつ現代的なウェブアプリケーションを構築。

    動画

    プロジェクト（初級）

    ニュースレター

    • Next.js News - 新しい機能や今後の開発、ベストエッセイ、ツール、プラグインを紹介する月刊Next.jsニュースレター
    • Next.js Notes - 月刊Next.jsおよびJavaScriptプラットフォームのニュース

    求人

    • Jobs in JS - 米国、カナダ、英国におけるNext.js開発者向けの求人。毎日更新。

    コントリビューション

    素晴らしいパッケージ、記事、ブログ、動画などを見つけましたか？ プルリクエストを送ってください！ guidelinesに従ってください。ありがとうございます！

    私の blog をチェックしてくださいまたは Twitter で hi を言ってください。

    ライセンス

    CC0