React 简单登录平台Demo(1):Next.js配置
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>前言</li><li>体验Next.js<ul><li>中文文档路径问题</li><li>创建项目</li><li>启动报错</li><li>测试TailWindCSS 热重载</li><li>如何添加路由</li></ul></li><li>第三方库引入<ul><li>tailwindcss配置</li><li>相关链接</li></ul></li><li>布局<ul><li>新建布局</li><li>布局也是嵌套影响的</li><li>根节点layout配置</li><li>路由跳转<ul><li>Link跳转</li><li>Hook跳转</li></ul></li></ul></li><li>简单的登录页面</li></ul></div><p></p><h1 id="前言">前言</h1>
<p>我之前的那个项目写到后面，发现还不如直接用Next.js呢，开箱即用。直接用官方的默认配置好了。</p>
<blockquote>
<p>Next中文文档</p>
</blockquote>
<h1 id="体验nextjs">体验Next.js</h1>
<blockquote>
<p>创建 Next.js 应用程序</p>
</blockquote>
<h2 id="中文文档路径问题">中文文档路径问题</h2>
<p>由于中文文档太久没更新了，直接到快速开始好了</p>
<p><img src="https://img2024.cnblogs.com/blog/3109750/202404/3109750-20240418131502295-1754893871.png"></p>
<h2 id="创建项目">创建项目</h2>
<pre><code>npx create-next-app@latest
</code></pre>
<pre><code>PS D:\workSpace\react\SimpleLoginDemo> npx create-next-app@latest
Need to install the following packages:
# 确定create-next-app的版本
create-next-app@14.2.2
Ok to proceed? (y) y
# 项目名称
√ What is your project named? ... my-next-test
# 启用代码检查，后面一路Yes即可
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes
Creating a new Next.js app in D:\workSpace\react\SimpleLoginDemo\my-next-test.
Using npm.
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next
Installing devDependencies:
- postcss
- tailwindcss
- eslint
- eslint-config-next
added 353 packages in 41s
133 packages are looking for funding
run `npm fund` for details
Success! Created my-next-test at D:\workSpace\react\SimpleLoginDemo\my-next-test
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/3109750/202404/3109750-20240418131818350-387658989.png"></p>
<p>启动项目</p>
<pre><code>npm run dev
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/3109750/202404/3109750-20240418150714953-260055206.png"></p>
<h2 id="启动报错">启动报错</h2>
<p><img src="https://img2024.cnblogs.com/blog/3109750/202404/3109750-20240418141537658-988397799.png"></p>
<pre><code>npm install next@canary
</code></pre>
<h2 id="测试tailwindcss-热重载">测试TailWindCSS 热重载</h2>
<p>在page.tsx中添加hello world</p>
<pre><code><h1 className="text-3xl font-bold underline rounded-md border-4border-sky-500">Hello world!</h1>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/3109750/202404/3109750-20240418152215911-1735674829.png"></p>
<h2 id="如何添加路由">如何添加路由</h2>
<p><img src="https://img2024.cnblogs.com/blog/3109750/202404/3109750-20240418160415812-401269749.png"></p>
<p>后面经过我的多次对比后发现，NEXT.JS的中文文档已经全面落后，后面得根据官方英文文档来写代码了</p>
<blockquote>
<p>React官方英文文档</p>
</blockquote>
<p>现在React内置了一个App Router，必须得按照他的逻辑写。</p>
<p><img src="https://img2024.cnblogs.com/blog/3109750/202404/3109750-20240418170515933-1533383855.png"></p>
<ul>
<li>src/app
<ul>
<li>page.tsx-->/</li>
<li>about
<ul>
<li>page.tsx -->/about</li>
</ul>
</li>
</ul>
</li>
</ul>
<h1 id="第三方库引入">第三方库引入</h1>
<ul>
<li>antd：UI组件</li>
<li>react-icons：Icon组件</li>
<li>@iconify/json @iconify/tailwind：Icon组件</li>
<li>echarts-for-react/echarts：图表组件</li>
</ul>
<pre><code>npm install antd
npm install react-icons --save
npm i @iconify/json @iconify/tailwind -D
npm i -D daisyui@latest
npm install --save echarts-for-react
npm install --save echarts
</code></pre>
<h2 id="tailwindcss配置">tailwindcss配置</h2>
<p>因为我们引入了两个tailwindcss的插件，所以需要在tailwind.config.css里面进行对应的配置</p>
<pre><code class="language-js">import type { Config } from "tailwindcss";
const { addDynamicIconSelectors } = require('@iconify/tailwind')
const config: Config = {
content: [
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
},
plugins: ,
};
export default config;
</code></pre>
<h2 id="相关链接">相关链接</h2>
<blockquote>
<p>Ant Design 中文文档</p>
</blockquote>
<blockquote>
<p>作为 Tailwind CSS 的插件来安装 daisyUI</p>
</blockquote>
<blockquote>
<p>React Icons 官方文档</p>
</blockquote>
<blockquote>
<p>yesicon 中文Icon网</p>
</blockquote>
<blockquote>
<p>echarts-for-react的使用</p>
</blockquote>
<h1 id="布局">布局</h1>
<p>既然用了App-Router，那就全部按照NEXT全套上好了</p>
<h2 id="新建布局">新建布局</h2>
<p>Next.js里面，布局不会被反复重写渲染。</p>
<p><img src="https://img2024.cnblogs.com/blog/3109750/202404/3109750-20240418171611389-483985998.png"></p>
<p>比如</p>
<ul>
<li>src/app
<ul>
<li>about
<ul>
<li>page.tsx//这个被layout影响</li>
<li>layout.tsx//about文件夹下面所有的page都会被布局影响</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="布局也是嵌套影响的">布局也是嵌套影响的</h2>
<ul>
<li>src/app
<ul>
<li>layout.tsx//标记为layout1</li>
<li>about
<ul>
<li>page.tsx//这个被两个layout影响。layout1-->layout2-->page.tsx</li>
<li>layout.tsx//标记为layout2,</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="根节点layout配置">根节点layout配置</h2>
<p>根节点layout必须包含html+body元素</p>
<p><img src="https://img2024.cnblogs.com/blog/3109750/202404/3109750-20240418172019116-1966332830.png"></p>
<h2 id="路由跳转">路由跳转</h2>
<h3 id="link跳转">Link跳转</h3>
<p>直接用个Link指定跳转的位置就行了</p>
<p>import Link from 'next/link'</p>
<p>export default function Page() {<br>
return Dashboard<br>
}</p>
<h3 id="hook跳转">Hook跳转</h3>
<p>因为next.js分为服务端渲染和客户端渲染，而后端我直接写就可以了，所以我们所有的页面都直接用'use client'去声明这个页面是客户端页面</p>
<pre><code class="language-js">//必须使用use client才能使用hook
'use client'
import { useRouter } from 'next/navigation'
export default function Page() {
const router = useRouter()
return (
<button type="button" onClick={() => router.push('/dashboard')}>
Dashboard
</button>
)
}
</code></pre>
<h1 id="简单的登录页面">简单的登录页面</h1>
<p>我们之前只是简单的了解一下NEXT.JS而已，深入的内容我们先跳过，我们先写个简单的静态页面即可。写了两天的tailwindcss，发现写起来是非常的麻烦。想想算了，先用anti凑合用用好了</p><br><br>
来源：https://www.cnblogs.com/gclove2000/p/18140873
頁:
[1]