airframe next
1.0.0
スマートフォン、タブレット、またはデスクトップでうまく機能する高品質のダッシュボード /管理 /分析テンプレート。 MITライセンスとしてオープンソースとして利用可能。
ミニマリストのデザインと革新的なライトUIを備えた機体ダッシュボードを使用すると、素晴らしいUIを使用して驚くほど強力なアプリケーションを構築できます。大規模なアプリケーション用に完全に設計されており、詳細なステップバイステップドキュメントがあります。
この機体プロジェクトは、nextJSに基づいています。これは、優れたサーバーサイドレンダリングサポートとの反応のために作成された一般的なフレームワークです。ブートストラップサポート用のカスタマイズされたReactStrapが含まれています。ここで見つけられないトピックは、おそらくNextJSドキュメントで説明されています。
注：このプロジェクトを実稼働で使用する場合は、nodejsをサポートするサーバーが必要になります。
開発環境を実行しようとする前に、ローカルマシンにnodejs（> = 10.0.0）をインストールする必要があります。
npm installを実行します。抽出されたディレクトリに.npmrcというファイルがあることを確認してください。これらのファイルは通常、UNIXベースのシステムに隠されています。
開発環境を開始するには、コンソールでnpm run dev入力します。これにより、ホットリロードが有効になっている開発サーバーが開始されます。
パッケージに含まれているシェルスクリプトを使用できます。ターミナルからUNIXベースのシステムrun ./build-dist.shを使用している場合、 /distディレクトリにパッケージを展開する準備ができています。
シェルスクリプトを使用できない場合は、パッケージを手動で準備する必要があります。
npm run build実行します.nextstaticpackage.json.npmrcnpm install実行します。npm startを実行してアプリを開始できるようになりました次のプラグインを追加し、 next.config.jsファイル内でそれらを構成することにより、追加のビルド機能を追加できます。
プロジェクトプロジェクト構造について関心のあるいくつかのポイント：
components -Global Reactコンポーネントはこちらにアクセスする必要がありますstyles - ここに追加されたスタイルはCSSモジュールとして扱われないため、グローバルクラスやライブラリスタイルはこちらに行く必要がありますfeatures - ページ固有のコンポーネントはここにありますfeatures/Layout - AppLayoutコンポーネントは、それ自体内にページの内容をホストするここにあります。各ページのレイアウトコンポーネントを変更できます。core/colors.jsダッシュボードで定義されたすべての色でオブジェクトをエクスポートします。 JSベースのコンポーネントのスタイリング - チャートなどのスタイリングに役立ちます。pages - ページコンポーネントはこちらです。 NextJSは、ファイル名を自動的にURLにルーティングします。ルートコンポーネントは/routes/ディレクトリ内の個別のディレクトリに配置する必要があります。次に、 /routes/index.jsファイルを開き、コンポーネントを添付する必要があります。これを2つの異なる方法で行うことができます。
静的にインポートされたページは、他のすべてのコンテンツを使用してPageloadに熱心にロードされます。そのようなページに移動するときに追加の負荷はありませんが、最初のアプリのロード時間も長くなります。静的にインポートされたページを追加するには、次のように行う必要があります。
// Import the default component
import SomePage from './SomePage' ;
// ...
export const RoutedContent = ( ) => {
return (
< Switch >
{ /* ... */ }
{ /* Define the route for a specific path */ }
< Route path = "/some-page" exact component = { SomePage } />
{ /* ... */ }
</ Switch >
) ;
} ルーティングシステムは、NextJS自体によって処理されます。ここでドキュメントを見つけることができます-NEXTJSルーティング
Navbarまたはサイドバーに追加のコンテンツを表示する場合があります。これを行うには、特定のページのカスタマイズされたレイアウトコンポーネントを定義する必要があります。例：
features/layoutで新しいレイアウトコンポーネントを作成します。 LayoutDefaultコンポーネントを例として取ります。pages/example-page.js 。 import React from 'react' ;
import { CustomLayout } from
'./../../features/Layout/CustomLayout' ;
const ExamplePage = ( ) => (
{ /* Page Content Here */ }
) ;
ExamplePage . layoutComponent = CustomLayout ;
export default ExamplePage ; <Layout>コンポーネントをラッピングする必要がある<ThemeProvider>コンポーネントにinitialStyleとinitialColorを提供することにより、サイドバーとNavbarの配色を設定できます。
可能なinitialStyle値：
考えられるinitialColor色値：
コンポーネントからThemeConsumerを使用して、ランタイムの配色を変更できます。例：
// ...
import { ThemeContext } from './../components' ;
// ...
const ThemeSwitcher = ( ) => (
< ThemeConsumer >
( { onChangeTheme } ) = > (
< React . Fragment >
< Button onClick = { ( ) => onThemeChange ( { style : 'light' } ) } >
Switch to Light
</ Button >
< Button onClick = { ( ) => onThemeChange ( { style : 'dark' } ) } >
Switch to Dark
</ Button >
</ React . Fragment >
)
</ ThemeConsumer >
) ; ThemeConsumerが提供するオプション：
