mdnext
1.0.0
mdnextは、nextjs + mdxプロジェクトを爆破するためのツールのエコシステムです
新しいプロジェクトを開始したいですか？
# Using NPX we'll start up the mdnext CLI prompts --
npx mdnext
# You will first be prompted with.. --
What is the name of your project ?
# Then you will choose which template to use
Select which template to use ... MDXベースのアプリのコンポーネントにアクセスしたいですか？
# Even though we're a Next based ecosystem, our `MDX` components should be usable in most React based applications
yarn add @mdnext/components
or
npm i @mdnext/components mdnext 、NextJS + MDXの作業を強化するためのツールのエコシステムです。
mdnext CLIは、正式に維持されているコレクションを表面化し、コミュニティは選択するテンプレートを提出しました。選ばれると、プロジェクトはクリーンなコミット履歴でローカルにクローン化され、次のプロジェクトを構築する準備ができています。
@mdnext/components MDXを操作するためのアクセス可能な（Chakrauiに感謝）と拡張可能なコンポーネントを配信します。これらには、コードブロックのスタイリングのCodeコンポーネントや、豊富なコンテンツをMDXに埋め込むためのIframesのように見たものが含まれます
mdnextテンプレートコレクションは、 MDX （およびその他のデータソース）、メディアの配信、最も一般的なワークフロー（ECOMM /ブログ /製品ページ）の処理方法について意見を持つ次のJSベースのプロジェクトです。正式に維持されているテンプレートのコレクションがありますが、コミュニティが作成したものを見て共有することに興奮しました。私は、Web開発者として多くの異なる意見や慰めがあり、私たちのエコシステムにアクセスできることを望んでいることを知っています。
mdnext-starterの基本構造は、 MDX Nextどのように使用するかというコアにある他のすべてのテンプレート全体で見ることができます。
この構造を知ることは、現在のベストプラクティス（解釈が自由にある！）とプラグアンドプレイに十分簡単なことを知らせるのに役立ちます。スターターに飛び込みましょう：
jsconfig.js
NextJSを使用すると、アプリの絶対パスを構成できます。これを使用して、 srcディレクトリ内にすべての機能とユーティリティを簡単にインポートします
pages
ページディレクトリはルーティングを定義します。 getStaticProps / getStaticPaths / getServerPropsなどのライフサイクル方法は、ページレベルで利用できます。これは、MDXコンテンツをコンポーネントに渡すデータとして消費する場所です。
*_app.js* nextjsを使用すると、ページの初期化に使用されるアプリコンポーネントをオーバーライドできます。詳細はこちら*_document.js* ：アプリケーションの<html>および<body>タグを拡張できます。all-data/index.js ：このページは、個々のMDXデータページのすべてへのリンクを表示する例です。ここでは、 getStaticPropsを使用して、コンポーネント用のMDXファイルのFrontmatterをフィードします。data/[slug].js ：ここでは、Nextjsの動的ルーティングを使用します。 getStaticPaths使用することにより、動的なナメクジをフィードし、すべてのロジックを一度処理し、ロードする各MDXデータに適用できます。これにより、 getStaticPropsのデータに一致させ、それをページとコンポーネントに表示できます。index.js ：アプリのルートにあるページは、 pagesディレクトリindex.jsの内側に住んでいます。 src当社のsrcディレクトリは、すべてのクライアントコードを保持しています。当社のcomponents 、カスタムhooks 、 utility関数、およびMDXファイルはすべてここに住んでおり、最初の3つは絶対パスインポートで利用できますか？
next.config.js environment variables 、 webpack 、 pageExtensionsなどのものに関するカスタム構成の場合、 next.config.jsを利用できます
各テンプレートには、新しい構成を構成する追加に関する明示的なドキュメントを備えた独自のREADMEがあります。それ以外の場合は、コアの各テンプレートを見つけることができます。MDNEXT mdnext-starterと同様に開始
mdnext内のテンプレートは、新しいWebサイトを開始するときに摩擦を軽減するために作成されました。ブログ、個人サイト、クライアントの仕事などは、いつでも始めるのが非常に困難に感じることがあります。
何を達成する必要がありますか？
スタイリングをどのように処理しますか？
データをどのように処理しますか？
認証を統合する最良の方法は何ですか？
これらのテンプレートの意見は、すぐに開始し、適切でカスタマイズできるようになります。
現在維持されているテンプレート：
mdnext-starterこれは、すべてのテンプレートが作成される最も意見の少ないテンプレートです。 getStaticProps/Pathsの内部でMDXを調達する例の外には、非常に最小限の構成と意見がありますmdnext-blogブログテンプレートは、 mdnext-starterの上に機能を追加します。特にスタイリングにChakra-UIを使用します。ブログの構成ページに投稿し、 MDXファイルをルートとして使用してコンテンツレベルをレベルにします。ブログの投稿をフィルタリングするためのFuseJS 。このテンプレートを動作していることを確認してください！mdnext-overlays新しいストリーマーになると、多くの課題に遭遇します。最終的には、ストリームとそれが視聴者のために、独自のシーン、アニメーション、インタラクションをセットアップしたいと思うでしょう。好きなツールを使用して作成してみませんか？この構成を使用すると、各新しいシーンをルートとして構成するためのベースレイヤーでセットアップされます。各ルートには、Twitch API、Twitchチャット、ストリームを取り巻く情報とイベントを取り巻く情報と対話する方法が含まれています。私たちのコミュニティはテンプレートを提出しました：
mdnext-tailwind Tailwind + mdnextプロジェクトですぐに立ち上がって実行したいですか？これが答えです。リソースのコレクションに沿った適切な構成は、 Tailwindに新しいものを快適に感じさせるためのリソースのコレクションです！mdnext-twin-macroこのスターターは、スタイリングの選択としてtwin.macroで構成されています。これにより、 Tailwind'sユーティリティクラスとemotion's cssメソッドを1回オフスタイルに利用できます。GraphCMSをDataSourceとして利用しているmdnext-graphcms 、ブログの基本をセットアップします。 GraphCMSからマークダウンを引き出してMDXを使用してUIに送信する方法の簡単な例から始めます。mdnext-reflexjs ReflexJSは、スピードと優れた開発者エクスペリエンスのために構築されたスタイリングライブラリです。システムUI仕様に基づいて、スタイルの小道具と制約を使用してコンポーネントをスタイリングできます。新しいテンプレートを送信したいですか？貢献セクションにアクセスして、mdnext-starterをチェックしてください
