191
151

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Next.js公式examples集を分類(2020年7月版)

Last updated at Posted at 2020-07-21

更新履歴

Next.js公式examples集を分類(2023年7月版)
Next.js公式examples集を分類(2022年7月版)
Next.js公式examples集を分類(2021年7月版)
Next.js公式examples集を分類(2021年1月版)
Next.js公式examples集を分類(2020年7月版)

はじめに

Next.jsの公式サンプルは現在236本あります。(2020/07/22)
しかし、このままではどれを見たらいいのかわからないので主観で分類してみました。

(基礎)Next.jsで基礎的な内容を扱っているサンプル。
(公式)公式ドキュメント で説明するのに使われているサンプル等。

degitを使ってソースのみを取得したい(npx create-next-appをつかってインストールまではしなくていい場合)

Next.js公式examples集

Next.jsの基礎1易しい
basic-css (基礎)(公式)CSS in JSを使っている
basic-export (基礎)最も基本的な使用法
dynamic-routing (基礎)(公式)動的ルーティングの例
environment-variables (基礎)環境変数の使い方
head-elements (基礎)ヘッド要素の例
hello-world (基礎)Next.jsの基本中の基本
layout-component (基礎)一般的な使用例
nested-components (基礎)コンポーネントをネストして利用する例
using-router (基礎)(公式)コンポーネントの代わりにnext/routerを使ってページをリンクする
with-app-layout (基礎)_app.jsを使用してすべてのページにグローバルレイアウトを実装する
with-loading (基礎)ページ切替時に時間がかかる時、Loading画面を表示する技術
Next.jsの基礎2普通
catch-all-routes (公式)ページをデータから自動的に作成してくれる機能
data-fetch (公式)サーバーとクライアントでデータをフェッチするのが非常に簡単になります。
gh-pages Nextの背後にある最も基本的なアイデアを示しています。
with-context-api アプリでreact context apiを使用する方法
with-dynamic-app-layout app.jsを使用してページの_dynamicレイアウトを実装する方法
with-dynamic-import (公式)モジュールを動的にインポートする方法
with-env-from-next-config-js (公式)next.config.jsを使って環境変数をビルド時に設定します。
with-next-page-transitions ページ間移動時において読み込み状態を簡単に追加
with-prefetching ページをプリフェッチ(事前読み込み)するサンプルアプリ
with-shallow-routing (公式)ShallowRoutingExample
with-static-export (公式)APIからデータをフェッチするNext.jsアプリケーションを静的HTMLファイルにエクスポートして、ページの動的リストを生成する方法
with-typescript タイプスクリプトを使って型を適用
with-typescript-eslint-jest NextJS Typescriptボイラープレート
with-typescript-types TypeScript型システムをNext.jsに統合する方法を示しています。
UI関連ant
with-ant-design Ant Design of ReactとともにNext.jsを使用する方法
with-ant-design-less Ant Design of ReactとともにNext.jsを使用する方法
with-ant-design-mobile antd-mobileとともにNext.jsを使用する方法
with-ant-design-pro-layout-less Ant Design Pro Layout of React.とともにNext.jsを使用する方法
UI関連その他
with-atlaskit Atlaskit of ReactとともにNext.jsを使用する方法AltassianのオフィシャルUIライブラリ
with-chakra-ui Webサイトやアプリの作成を非常に簡単にする、アクセス可能で再利用可能で構成可能なReactコンポーネントのセットchakra-uiをNext.jsアプリ内のコンポーネントライブラリとして使用する方法
with-grommet Grommet UI library
with-material-ui (人気)(Material-UI公式サイトのサンプル) mui-org/material-ui/examples/nextjs/
with-patternfly RedHatが作っているUIフレームワークUIパターン集
with-rebass UIコンポーネントRebassはReactのブートストラップです。
Firebase関連
with-firebase クライアントサイドアプリケーション用のFirebaseの簡単な設定です。
with-firebase-authentication サーバーレスAPIを使用したFirebase認証の例
with-firebase-cloud-messaging FirebaseCloudMessagingの例
with-firebase-hosting Firebaseホスティングの例
API Routes編
api-routes (公式)基本的なAPIルートの例
api-routes-cors (公式)Cross-OriginResourceSharing(CORS)追加のHTTPヘッダーを使用して、ある起点で実行されているWebアプリケーションに、異なる起点から選択されたリソースへのアクセスを許可するようにブラウザーに指示するメカニズムです。
api-routes-middleware (公式)APIルート
api-routes-rest (公式)独自のルートを構築する簡単なソリューションを提供するAPIルートが付属しています。この例は、それを使用してREST APIを作成する方法を示しています。
API Routes編 GraphQL関連
api-routes-graphql (公式)GraphQL Server apollo-server-micro
with-graphql-faunadb FaunaDBGraphqlスターターの例-FaunaDBゲストブック
with-graphql-hooks GraphQLフックの例GraphQL Hooksは、最小限のフック優先のGraphQLクライアントになることを目的としたNearFormのライブラリです。
with-graphql-react graphql-react最新のコンテキストを使用したReactのGraphQLクライアント
with-react-relay-network-modern The production-ready GraphQL client for React.
with-reason-relay GraphQL backend
with-relay-modern Facebookが開発 Next.jsの9.3で導入されたgetStaticProps, および9.4で導入されたIncremental Static Regenerationは、Relayと非常に相性がいい The production-ready GraphQL client for React.
with-typescript-graphql GraphQLとtypescriptの使用例
with-urql 高度にカスタマイズ可能で用途の広いGraphQLクライアント
API Routes編 apollo関連
api-routes-apollo-server ApolloはGraphQLクライアント
api-routes-apollo-server-and-client ApolloはGraphQLクライアント
api-routes-apollo-server-and-client-auth ApolloはGraphQLクライアント
with-apollo ApolloはGraphQLクライアント
with-apollo-and-redux ApolloはGraphQLクライアント
コンポーネント関連
with-carbon-components IBM's carbon-components-react
server関連
custom-server (公式)
custom-server-actionhero Action Hero
custom-server-express (公式)Express Webアプリケーション
custom-server-fastify Fastify
custom-server-hapi (公式)Secure Framework
custom-server-koa (公式)new web framework designed
custom-server-polka Express.jsの代替品
custom-server-typescript Nodemonを使用してサーバーとクライアントの両方でTypeScriptを使用し、Next.jsユニバーサルコードに影響を与えずにサーバーコードをライブでリロードする方法
storybook関連
with-storybook UIコンポーネントを開発するためのオープンソースツール
検索関連
with-algolia-react-instantsearch 検索の実装と検索の分析
監視関連
with-sentry アプリケーション監視プラットフォーム
with-sentry-simple アプリケーション監視プラットフォーム
リッチテキスト関連
with-draft-js RichTextEditorFrameworkforReact
with-quill-js powerfulrichtexteditor
with-slate リッチテキストThisiseditablerichtext
DB関連
with-mongodb-mongoose MongoDB
with-prisma databasetoolkit
with-realm-web MongoDBRealmWebSDK
認証関連
auth0 (認証)(有料有り)認証サポートを簡単に追加する方法
with-cookie-auth-fauna (認証)(有料有り)ユーザーを認証し、トークンを安全な(JS以外の)Cookieに格納します。
with-iron-session (認証)署名および暗号化されたCookieを使用してセッションデータを格納する認証システムを作成
with-magic (認証)(有料有り)Magic電子メールベースのマジックリンクを使用した、Cookieベースのパスワードなし認証を特徴としています。
with-next-auth (認証)オープンソースで使いやすく、デフォルトで安全な認証ライブラリを備えたnext-authを使用
with-passport (認証)ユーザー名とパスワードを使用したCookieベースの認証
with-passport-and-next-connect (認証)Passport.jsでnext-connectおよびcookieベースの認証を使用して、基本的なCRUDアプリを作成します。
with-userbase (認証)(有料有り)Userbaseユーザーアカウントとデータの永続性を静的サイトに追加する最も簡単な方法です
CSS関連
with-aphrodite (公式)CSS in JS aphroditeを使用したアプリの例
with-astroturf CSS in JS stroturfを使用したアプリの例
with-cxs (公式)CSS in JS minimal CSS in JS cxsを使用したアプリの例
with-emotion CSS in JS SSR中にサーバーデータを直接Next.jsページに渡す
with-emotion-11 CSS in JS
with-fela (公式)CSS in JS
with-filbert CSS in JSソリューション(フレームワーク)filbert-jsでNext.jsを使用する
with-glamor (公式)CSS in JS CSS関連スタイリングソリューションの使用方法
with-goober 小さなcss-in-js
with-linaria CSS linariaを使用したアプリの例
with-next-css CSSモジュールサポートの使用方法
with-next-less CSS Next.js + Less
with-next-sass Sass/Scssモジュールサポートの使用方法
with-rbx-bulma-pro Bulma is simply a collection of CSSclasses.
with-react-bootstrap react-bootstrap react用に再構築されたbootstrap
with-react-jss JSSはCSSのオーサリングツール
with-react-md (紹介ページが消えている、V2になってページが移動した?)SCSSreact-md (React Material Design)
with-react-with-styles CSS in JS
with-semantic-ui CSSフレームワーク Semantic UI Reactと一緒にNext.jsを利用する方法
with-stitches CSS in JS
with-stitches-styled CSS in JS
with-style-sheet CSS in JSlibrarystyle-sheet
with-styled-components (公式)CSS in JS CSSstyled-components
with-styled-jsx-plugins CSS styled-jsxプラグインを使用
with-styled-jsx-scss PostCSS、SASS(SCSS)、LESS、またはstyled-jsxを備えたその他のプリプロセッサを使用できます。
with-styletron (公式)CSS in JSスタイルソリューション
with-tailwindcss (公式)tailwindCSS
with-tailwindcss-emotion tailwindCSS
with-typescript-styled-components StyledComponentsとTypeScriptの使用例CSS in JSの中で最も人気のあるライブラリ
with-typestyle CSSスタイルソリューションを使用する方法
状態管理redux関連
with-redux Redux関連
with-redux-code-splitting Redux関連
with-redux-observable Redux関連
with-redux-persist Redux関連
with-redux-saga Redux関連
with-redux-thunk Redux関連
with-redux-toolkit Redux関連
with-redux-wrapper Redux関連
with-rematch Redux関連
状態管理その他
with-kea 状態管理フレームワーク
with-mobx 状態管理アプリのグローバルな状態を取得したい場合
with-mobx-react-lite 状態管理
with-mobx-state-tree 状態管理
with-mobx-state-tree-typescript 状態管理
with-overmind 状態管理
with-recoil 状態管理ライブラリ
with-unstated unstated-nextReact状態管理ライブラリ
amp関連
amp (公式)Next.jsとAMP機能を使用してAMPページを作成する方法
amp-first AMPファーストサイトのボイラープレートを設定
amp-story Next.jsとAMP機能を使用してamp-storyを含むAMPページを作成する方法
国際化
with-i18n-rosetta 汎用国際化ライブラリ
with-lingui LinguiJS-JavaScriptでのシームレスな国際化
with-next-i18next i18nextに基づく国際化をnext.jsアプリケーションに追加する最も簡単な方法
with-next-translate next-translate Next.jsページを翻訳するためのツールです。
with-react-intl FormatJSクライアントとサーバーでWebアプリを国際化します。
AWS関連
with-aws-amplify AWSAmplifyは、モバイルおよびフロントエンドのウェブデベロッパーがAWSを利用して安全でスケーラブルなフルスタックアプリケーションを構築できるようにするツールとサービスのセットです。
with-aws-amplify-typescript AWSAmplifyは、モバイルおよびフロントエンドのウェブデベロッパーがAWSを利用して安全でスケーラブルなフルスタックアプリケーションを構築できるようにするツールとサービスのセットです。
テスト関連
with-jest テスト
with-mocha テスト
with-tesfy A/Bテストと機能フラグ
webpack関連
with-webpack-bundle-size-analyzer Webpackバンドルのサイズに寄与しているものを見つけるのに役立つ小さなユーティリティ。
cms関連
blog-starter (公式)Next.jsとMarkdownを使用して静的に生成されたブログの例
blog-starter-typescript Next.js、Markdown、TypeScriptを使用して静的に生成されたブログの例
cms-agilitycms AgilityCMS
cms-buttercms ButterCMS
cms-contentful (公式)Contentful
cms-cosmic Cosmic
cms-datocms (公式)DatoCMS
cms-graphcms GraphCMS
cms-prismic (公式)Prismic
cms-sanity (公式)Sanity
cms-storyblok Storyblok
cms-strapi (公式)Strapi
cms-takeshape (公式)TakeShape
cms-wordpress (公式)WordPress
with-netlify-cms Gitワークフロー用のオープンソースのコンテンツ管理システム
デスクトップアプリケーション関連
with-electron デスクトップアプリケーションElectron application example
with-electron-typescript デスクトップアプリケーションElectron application example with typescript
google関連
with-google-analytics GoogleアナリティクスとともにNext.jsを使用する方法
with-google-analytics-amp AMPと組み合わせてGoogleアナリティクスとともにNext.jsを使用する方法
with-react-ga react-ga React Google Analytics Module
実験中
z-experimental-refresh (実験的) アプリケーションやプロジェクトでは、これらの機能を(まだ)使用しないでください。
古い、数年更新がない
with-react-toolbox 古い怪しいリンクに飛ぶ
with-reflux 古いstoreAsimplelibraryforunidirectionaldataflowarchitectureinspiredbyReactJSFlux.
moved、removed、非推奨、廃止
page-transitions (removed)/examples/with-next-page-transitions
parameterized-routing (removed)examples/dynamic-routing
with-cookie-auth (非推奨)(認証)
with-dotenv (インストール不要)Next.js9.4からサポートされています。
with-expo ExpoユニバーサルReactアプリケーションのプラットフォームNext.jsのサポートは試験的なものです。
with-expo-typescript ExpoユニバーサルReactアプリケーションのプラットフォームNext.jsのサポートは試験的なものです。
with-firebase-authentication-serverless (moved)with-firebase-authentication
with-flow Flow静的型チェッカーFlowを使用したアプリの例
with-framer-motion プロダクション対応のアニメーションライブラリです。
with-glamorous (廃止)代替はemotionを推奨
with-global-stylesheet (removed)こちらを利用してくださいexamples/with-next-css
with-global-stylesheet-simple (removed)こちらを利用してくださいexamples/with-next-css
with-markdown (moved)next.js/examples/blog-starter/
with-next-routes (インストール不要)Next.jsでサポートされています。
with-now-env (インストール不要)(公式)Next.js9.4から自動的にサポートします。
with-pretty-url-routing (廃止)Next.jsではデフォルトで動的ルーティングが自動的にサポートします。
with-storybook-typescript UIコンポーネントを開発するためのオープンソースツール
with-strict-csp-hash (moved) with-strict-csp
with-styled-jsx-postcss (moved) with-styled-jsx-plugins
with-sw-precache (非推奨)代わりにusingcanary/examples/with-next-offline
with-universal-configuration-build-time (removed)Next.js9.4からサポートされています。
with-universal-configuration-runtime (インストール不要)Next.js9.4からサポートされています。
with-webpack-bundle-analyzer (moved)analyze-bundles
その他
active-class-name Linkコンポーネントにプロパティをつけてリンク動的に変更
analyze-bundles @next/bundle-analyzerを使用して出力バンドルを分析する方法
custom-routes-proxying カスタムルートプロキシの例
progressive-render プログレッシブサーバー側レンダリングを実装するアプリの例
ssr-caching (公式)SSR化されたページをメモリにキャッシュするアプリの例
svg-components svgファイルのインポートおよびReactコンポーネントとしてのレンダリングのサポートを追加します。
using-preact Reactの代わりにPreactを使用
with-absolute-imports Webpackの構成を変更せずに、相対インポートではなく絶対インポートを持つようにBabelを構成する方法
with-babel-macros babel-macrosを使用したアプリの例単純なコンパイル時ライブラリを構築できます???
with-cerebral CerebralJSによる宣言的な状態と副作用の管理
with-custom-babel-config (公式)カスタムBabel構成の使用
with-custom-reverse-proxy リバースプロキシの例
with-docker 実行時にdockerアプリケーションのカスタム環境変数を設定する方法
with-dynamic-app-layout app.jsを使用してページの_dynamicレイアウトを実装する方法
with-hls-js HTTPライブストリーミングクライアントを実装するJavaScriptライブラリ
with-http2 HTTP2サーバーを使用する最も基本的な例
with-mdx MDXは Markdownに直接 JSX を挿入できるフォーマット
with-monaco-editor VSCodeを強化するコードエディター
with-mux-video ビデオ用のAPI
with-next-offline オフライン機能を簡単に有効化
with-next-seo next-seoSEOの管理を簡単にするプラグインです。
with-orbit-components Kiwi.comの製品を構築する最も簡単な方法を開発者に提供するReactコンポーネントライブラリです。
with-polyfills ポリフィルとは、最近の機能をサポートしていない古いブラウザーで、その機能を使えるようにするためのコードです。
with-react-helmet react-helmetHeadタグに関する全てを管理
with-react-multi-carousel react-multi-carouselは、外部依存関係のない複数のアイテムをサポートするサーバー側でレンダリングするカルーセルを提供するReactコンポーネントです。
with-react-native-web ReactNativeforWeb
with-reasonml OCamlツールチェーンReasonを使用すると、JavaScriptとOCamlの両方のエコシステムを活用しながら、シンプルで高速かつ高品質なタイプセーフコードを記述できます。
with-reasonml-todo OCaml
with-route-as-modal モーダルウィンドウ?を条件付きで表示する方法
with-segment-analytics セグメント分析
with-stencil Webコンポーネントおよび高性能Webアプリ用のコンパイラ
with-stomp テキスト指向メッセージングプロトコル
with-strict-csp Content Security Policy(CSP)厳密なCSP生成スクリプトハッシュを使用したアプリの例
with-stripe-typescript stripeオンライン決済
with-styled-components-rtl 右から左にすると、サイト内のすべての要素を「反転」して、右から左に読む文化(たとえば、アラビア語)のニーズに合わせることができます。
with-three-js WebGLレンダラーを備えた軽量の3Dライブラリ
with-videojs opensource HTML5 player framework
with-web-worker worker.jsWebpack内でWebワーカーを自動的にバンドルしてコンパイルします。
with-webassembly WebAssemblyRust
with-why-did-you-render 特定のコンポーネントがいつ、なぜ再レンダリングされるかを簡単に追跡するのにも役立ちます。
with-xstate ステートマシン
with-yarn-workspaces デフォルトで利用可能なパッケージアーキテクチャをセットアップする新しい方法
with-zeit-fetch (Vercel本家)@zeit/fetchの使い方
with-zones (公式)ゾーンとは Next.js アプリケーションの単一のデプロイメントのことです。複数のゾーンを単一のアプリケーションに統合できます。

examples集を試すにはpnpm を推奨

追記 2021/01/30
pnpm はnpmやyarnと同等のパッケージ管理ツールです。
これは複数のプロジェクトに同じモジュールの同じバージョンをインストールする場合二重インストールしません。
そのためインストールの高速化とディスク使用容量の効率化が望めます。

下記の「Yarn workspace機能」で色々いじるよりも楽にインストール出来るはずです。

pnpm Fast, disk space efficient package manager
https://pnpm.js.org/
追記終了

Yarn workspace機能で2個目以降のインストール時間を短縮

前提

複数のサンプルを試したい場合に、一つ一つインストールしていくと非常に時間がかかってしまいます。どうにか時間を短縮したいという場合。

  • 問題点
    サンプルによっては正常に動かないものがあります。
    認証系など外部に頼るものをインストールした時。
    他には、数百個同時にインストールをした時。
    どちらも解決方法は不明です。

もしエラーが出た場合
そのexampleのREAD.MEを読んでみましょう。
npm install or yarnという単純なインストール方法でない可能性が高いです。

Yarn workspace機能を利用してリポジトリを一元管理します。

準備&初期設定

まずはNext.jsリポジトリの中にあるexamples/を取得します。

公式Next.jsリポジトリから
git clone https://github.com/vercel/next.js.git
Next.jsの公式リポジトリからNext.js本体をgit cloneします。
もしくはgithubのDownload ZIP機能でローカルフォルダに保存します。

git cloneした、もしくはダウンロードしたzipファイルを解凍したフォルダの中にexamples/フォルダがありますので取り出します。

[nextjs-examples]というexamplesを管理するフォルダを作ってこの中に保存します。
( []内の名前は自由に変更可能です。)

現在のフォルダ構造

[nextjs-examples]/
  └ examples/
    ├ [exampleA]/
    ├ [exampleB]/
    └ [exampleC]/

[nextjs-examples]/はルートフォルダになります。

[nextjs-examples]/をVSCodeで開きます。
ターミナルから
yarn init --yes --private
を実行します。

package.jsonが出来ます。

package.json
{
  "name": "nextjs-examples",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true
}

※privateはtrueにする必要があります。

現在のフォルダ構造

[nextjs-examples]/
  ├ examples/
  │   ├ [exampleA]/
  │   ├ [exampleB]/
  │   └ [exampleC]/
  ├ node_modules/
  └ package.json
  └ yarn.lock

最初の一つをインストールする

まずは、examplesの中でNext.jsを初めて触るのに手頃な「basic-export」をインストールしてみます。

package.jsonを開きます。
"workspaces"を追記して、その中に
インストールする"examples/basic-export"を書きます。

package.json
{
  "name": "nextjs-examples",
  "version": "0.1.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "workspaces": [
    "examples/basic-export"
  ]
}

インストールするexampleを決めたらルートでyarnもしくはyarn installを実行します。
最初なので数分かかると思います。

インストール完了後に、

cd examples/basic-export
yarn dev
これでbasic-exportがサーバーで起動し、

http://localhost:3000/で実行されているのが確認できます。

サーバーの起動を停止して(Ctrl+C)
次のサンプルをインストールしてみます。

cd ../..
(ルート[nextjs-examples]/)
に戻ります。

examplesの「basic-css」と「dynamic-routing」の2つを追加してみます。

package.json
{
  "name": "nextjs-examples",
  "version": "0.2.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "workspaces": [
    "examples/basic-export",
    "examples/basic-css",
    "examples/dynamic-routing"
  ]
}

ルートフォルダに戻り
(ルート[nextjs-examples]/)
yarn or yarn install を実行してみます。

Done in 6.78s.でインストールが完了しました、早いですね。

それぞれのサブフォルダに移動してyarn devを実行してみます。
3つとも動くのが確認できました。

では次に、「Next.jsの基礎1易しい」を全部インストールしてみましょう。

package.json
{
  "name": "nextjs-examples",
  "version": "0.3.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "workspaces": [
    "examples/basic-export",
    "examples/basic-css",
    "examples/dynamic-routing",
    "examples/environment-variables",
    "examples/head-elements",
    "examples/hello-world",
    "examples/layout-component",
    "examples/nested-components",
    "examples/using-router",
    "examples/with-app-layout",
    "examples/with-loading"
  ]
}


ルートフォルダに戻り ([nextjs-examples]/)
yarn or yarn install を実行してみます。
Done in 3.71s.でインストールが完了しました。
インストールするものがほぼありませんので一瞬で終わりましたね。

全部の動作確認はしていませんが、
エラーなども特に出ていないので、
一気にNext.jsの基礎2普通を全部インストールしてみましょう。

package.json
{
  "name": "nextjs-examples",
  "version": "0.4.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "workspaces": [
    "examples/basic-export",
    "examples/basic-css",
    "examples/dynamic-routing",
    "examples/environment-variables",
    "examples/head-elements",
    "examples/hello-world",
    "examples/layout-component",
    "examples/nested-components",
    "examples/using-router",
    "examples/with-app-layout",
    "examples/with-loading",
    "examples/catch-all-routes",
    "examples/data-fetch",
    "examples/gh-pages",
    "examples/with-context-api",
    "examples/with-dynamic-app-layout",
    "examples/with-dynamic-import",
    "examples/with-env-from-next-config-js",
    "examples/with-next-page-transitions",
    "examples/with-prefetching",
    "examples/with-shallow-routing",
    "examples/with-static-export",
    "examples/with-typescript",
    "examples/with-typescript-eslint-jest",
    "examples/with-typescript-types"
  ]
}

Done in 165.56s.でインストールが完了しました
「typescript」等が追加されているので少し時間がかかりました。

14個ものexampleを追加インストールしたのに、こんな短時間でインストールが完了しました。
このようにyarn workspaces機能を使うことで最初の一個以外残りはほぼ時間をかけることなくインストールが出来ました。

祝LGTM100に到達!

191
151
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
191
151

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?