React+Next.js+MaterialUI+Toolpad技术栈学习——安装
<blockquote><p>今天跟大家分享一个<code>React+Next.js+MaterialUI</code>技术栈的前端框架<code>Toolpad</code>。</p>
</blockquote>
<h2 id="相关资源">相关资源</h2>
<ul>
<li>MaterialUI</li>
<li>Toolpad</li>
</ul>
<h2 id="框架效果">框架效果</h2>
<p><img src="https://img2024.cnblogs.com/blog/21278/202503/21278-20250316222556771-1404935793.png" alt="image" loading="lazy"></p>
<h2 id="安装">安装</h2>
<ul>
<li>运行安装命令</li>
</ul>
<pre><code class="language-bash">npx create-toolpad-app@latest your-app
cd your-app
npm run dev
</code></pre>
<h2 id="文件结构">文件结构</h2>
<h3 id="无身份认证">无身份认证</h3>
<pre><code class="language-text">├── app
│ ├── (dashboard)
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ └── orders
│ │ └── page.tsx
│ └── layout.tsx
├── .env
├── .env.local
├── .eslintrc.json
├── .gitignore
├── next.config.js
├── package.json
├── README.md
└── tsconfig.json
</code></pre>
<h3 id="有身份认证">有身份认证</h3>
<pre><code class="language-text">├── app
│ ├── auth
│ │ └── signin
│ │ └── page.tsx
│ ├── api
│ │ └── auth
│ │ └── [...nextauth]
│ │ └── route.ts
│ ├── (dashboard)
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ └── orders
│ │ └── page.tsx
│ └── layout.tsx
├── .env
├── .env.local
├── .eslintrc.json
├── .gitignore
├── next.config.js
├── package.json
├── README.md
└── tsconfig.json
</code></pre><br><br>
来源：https://www.cnblogs.com/known/p/18775850
頁:
[1]