windmill dashboard nextjs typescript
1.0.0
@estevanmaitoのオリジナルプロジェクトをご覧ください
他の貢献者からの助けを借りて：
ライブで見る
これはテンプレートではありません。これは、Reactの上に構築された完全なアプリケーションであり、すべての小さな詳細が処理されるため、データを提供するためにデータを持ち込むだけです。
私のプロジェクトではアクセシビリティが優先事項であり、それもあなたのものであるべきだと思うので、これは実際のスクリーンリーダーを聞いて開発されました。フォーカストラップ、キーボードナビゲーションはどこでも利用できます。
Windmill Dashboard Reactは、Windmill React UIの上に構築されています。そこにあるすべての小さなコンポーネントのドキュメントがあります。
すべてのコンポーネントとコンテナは、フォルダーの例に保存されます
[ファイルnext.config.jsのhome /にヒットしたときにデフォルトのリダイレクトを変更する
async redirects ( ) {
return [
{
source : '/' ,
destination : '/example/login' ,
permanent : false ,
} ,
]
} サイドバーメニューを構成するには、ファイル（routes/sidebar.tsx）を参照してください。
これらは、サイドバーに表示されるルートです。彼らは3つのプロパティを期待しています：
path ：目的地。name ：表示する名前。icon ：アイテムを説明するアイコンドロップダウンとして使用されるアイテムは、ページオプションのようにpathを必要としませんが、 pathとnameを持つオブジェクトのroutes配列を期待してください。
// sidebar.js
{
path : '/example/tables' ,
icon : 'TablesIcon' ,
name : 'Tables' ,
} ,
{
icon : 'PagesIcon' , // <-- this is used as a submenu, so no path
name : 'Pages' ,
routes : [
// submenu
{
path : '/example/login' ,
name : 'Login' , // <-- these don't have icons
} ,
{
path : '/example/create-account' ,
name : 'Create account' ,
} ,これはcreate-next-appでBootstrappedのnext.jsプロジェクトです。
まず、依存関係をインストールします。
npm install
# or
yarn install次に、開発サーバーを実行できます。
npm run dev
# or
yarn devhttp：// localhost：3000を開き、ブラウザを使用して結果を確認します。
pages/index.tsxを変更して、ページの編集を開始できます。ファイルを編集するときにページ自動更新。
APIルートはhttp：// localhost：3000/api/helloでアクセスできます。このエンドポイントはpages/api/hello.tsで編集できます。
pages/apiディレクトリは/api/*にマッピングされます。このディレクトリのファイルは、Reactページの代わりにAPIルートとして扱われます。
next.jsの詳細については、次のリソースをご覧ください。
next.js githubリポジトリを確認できます - フィードバックと貢献を大歓迎です！
next.jsアプリを展開する最も簡単な方法は、next.jsの作成者からvercelプラットフォームを使用することです。
詳細については、next.js deploymentドキュメントをご覧ください。
