[React] Next.js

夜之瞳 發表於 2023-5-28 19:13:00

Next.js 产品级的 React 框架 - 中文开发入门教学
这里先了解下是个神马东西～
与  Review 的不同在于，这个重在实践～
 
 
<h2>安装过程</h2>
<hr>
<h3>官网</h3>
https://nextjs.org/docs/getting-started
 
<h3 class="md-end-block md-heading">操作步骤</h3>
<ul>
<li>
<h4 class="md-end-block md-heading">安装 Node.js</h4>
</li>
</ul>
https://nodejs.org/zh-cn/download/
<ul>
<li>
<h4 class="md-end-block md-heading">包管理器方式</h4>
</li>
</ul>
https://nodejs.org/zh-cn/download/package-manager/
<ul>
<li>
<h4 class="md-end-block md-heading">建立 NextJS 工程</h4>
</li>
</ul>
貌似next 13版本又发生了较大的升级。
本教程的Node也需要是14版本。
<div class="cnblogs_code" style="margin-left: 30px">
<pre># 建立工程
$ npx create-next-app@11.1.2 myweb

# TypeScript 版本
$ npx create-next-app@latest --typescript myweb_t

# 启动开发模式
$ cd myweb
$ npm run dev
>http://localhost:3000/</pre>
</div>
<div class="cnblogs_code" style="margin-left: 30px">
<pre># 文件路由？添加一个文件，根据文件名自动添加路由。 # 增加一个页面 About.js
$ nano About.js
...
>http://localhost:3000/About

# 编译生产模式
$ npm run build
$ ls -a
$ ls .next
$ npm start
>http://localhost:3000/</pre>
</div>
<ul>
<li>
<h4>添加 bootstrap CSS</h4>
</li>
</ul>
在“入口”文件_app.js中增强head的部分，添加一条 for css bootstrap.
<ul>
<li>
<h4>服务器前端</h4>
</li>
</ul>
以前的多页面站点是在服务端渲染的，输出到浏览器时已经有了完整的骨架（ html ），这样爬虫抓到时可以分析页面标题，内容等等，做 seo 容易，那时的技术栈是 jsp，php 等等。现在流行的前端框架在这方面是开了倒车，一个空的骨架，一个很大的 js，抓到浏览器以后才开始渲染完整的页面，爬虫就很为难了，因为它没法执行 js 啊，此外，白屏时间也是由于前端渲染带来的问题。于是又有了服务端渲染，让渲染这一步再回到服务端，在服务端模拟浏览器环境，给 react 和 vue 等框架一个可执行的上下文，就是为了提前得到完整的 html。前端就是这么扯蛋。 
<div class="cnblogs_code" style="margin-left: 30px">
<pre>// 原来设置在了./api的位置 export default function handler(req, res) {
res.status(200).json({ name: 'John Doe' })
}</pre>
</div>
 
 
 
<h2>路由 Routes</h2>
<hr>
<h3>文件路由</h3>
<div class="cnblogs_code" style="margin-left: 30px">
<pre>http://localhost:3000/news/top
http://localhost:3000/news/</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/310015/202305/310015-20230529181613903-1064842556.png" alt="" loading="lazy">
 
== 以下是react的形态 ==
next.js 省略以下文件。
<div class="cnblogs_code" style="margin-left: 60px">
<pre>// App.js </pre>
<pre>import PageHome from './components/PageHome';
import PageAbout from './components/PageAbout';
import PageNews from './components/PageNews';</pre>
<pre> function App() {
return (
 <div>
 <Header></Header>
 <div className="p-4">
 <Route path="/" exact>
 <PageHome></PageHome>
 </Route>
 <Route path="/news">
 <PageNews></PageNews>
 </Route>
 <Route path="/about">
 <PageAbout></PageAbout>
 </Route>
 </div>
 </div>
);
}</pre>
</div>
 
<h3>路由参数</h3>
<img src="https://img2023.cnblogs.com/blog/310015/202305/310015-20230529183638908-1934862827.png" alt="" loading="lazy">
<ul>
<li>
<h4>news/id </h4>
</li>
</ul>
<div class="cnblogs_code" style="margin-left: 30px">
<pre>import React from "react";
import { useRouter } from "next/dist/client/router";

const newsid = () => {
const router = useRouter();

console.log(router.pathname);
console.log(router.query);

return (
 <React.Fragment>
 <h1>newsid</h1>
 <hr />
 {router.pathname && (
 <h3>{router.pathname}</h3>
 )}
 {router.query.id && (
 <h3>{router.query.id}</h3>
 )}
 </React.Fragment>
)
}

export default newsid;</pre>
</div>
<ul>
<li>
<h4>blog/tag/id</h4>
</li>
</ul>
<div class="cnblogs_code" style="margin-left: 30px"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_628f28df-64bd-4549-8b92-0a2c02313a3c" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_628f28df-64bd-4549-8b92-0a2c02313a3c" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_628f28df-64bd-4549-8b92-0a2c02313a3c" class="cnblogs_code_hide" style="margin-left: 30px">
<pre>import React from "react";
import { useRouter } from "next/dist/client/router";

const newsid = () => {
const router = useRouter();

console.log(router.pathname);
console.log(router.query);

return (
 <React.Fragment>
 <h1>newsid</h1>
 <hr />
 {router.pathname && (
 <h3>{router.pathname}</h3>
 )}
 {router.query.tag && (
 <h3>{router.query.tag}</h3>
 )}
 {router.query.id && (
 <h3>{router.query.id}</h3>
 )}
 </React.Fragment>
)
}

export default newsid;</pre>
</div>
View Code</div>
 
<h3 class="md-end-block md-heading md-focus">"动态" 匹配路径</h3>
<img src="https://img2023.cnblogs.com/blog/310015/202305/310015-20230529184536001-203082740.png" alt="" loading="lazy">
<div class="cnblogs_code" style="margin-left: 30px">
<pre>http://127.0.0.1:3000/isbn/aa/bb/cc</pre>
</div>
变量slug代表的对象 反映了 isbn 后的部分。可以拥有“编程”。（实用）
<div class="cnblogs_code" style="margin-left: 30px">
<pre>import React from "react";
import { useRouter } from "next/dist/client/router";

const slug = () => {
const router = useRouter();

console.log(router.pathname);
console.log(router.query);

return (
 <React.Fragment>
 <h1>newsid</h1>
 <hr />
 {router.pathname && (
 <h3>{router.pathname}</h3>
 )}
 {router.query.slug && (
 <h3>{router.query.slug.join(',')}</h3>
 )}
 </React.Fragment>
)
}

export default slug;</pre>
</div>
 
<ul>
<li style="list-style-type: none">
<ul>
<li>
<h4 class="style-scope ytd-watch-metadata">Routes - 链接路径传递参数</h4>
</li>
</ul>
</li>
</ul>
如下这么搞，为何不直接使用：pathname: "/news/001"? 而是采用这种JSON of query的形式？
以下包含了“链接 link”与“按钮 router.push”两种点击方式。
<div class="cnblogs_code" style="margin-left: 60px">
<pre>import Head from 'next/head'
import Link from 'next/link'
import { useRouter } from 'next/dist/client/router'

export default function Home() {

const router = useRouter();
const btn_click = () => {
 router.push({
 pathname: '/news/',
 query: { id: '001' }
 })
}

return (
 <div>
 <Head>
 <title>Create Next App</title>
 <meta name="description" content="Generated by create next app" />
 <link rel="icon" href="/favicon.ico" />
 </Head>

 <main>
 <h1>Next.js</h1>
 <hr />
 <Link href="/About" >About</Link>

 <hr />
 <Link href={{
 pathname: "/news/[id]",
 query: { id: '001' }
 }}>新闻001</Link><br />
 <Link href={{
 pathname: "/news/",
 query: { id: '002' }
 }}>新闻002</Link><br />
 <Link href={{
 pathname: "/news/",
 query: { id: '003' }
 }}>新闻003</Link>
 </main>

 <hr />
 <button className="btn btn-success" onClick={btn_click}>新闻001</button>
 </div>
)
}</pre>
</div>
 
<h3>404 页面</h3>
默认的名字。
<div class="cnblogs_code" style="margin-left: 30px">
<pre>import React from "react";

const Page404 = () => {
return (
 <React.Fragment>
 <h1>Page404</h1>
 </React.Fragment>
)
}

export default Page404;</pre>
</div>
 
<div> </div> 
来源：https://www.cnblogs.com/jesse123/p/17438687.html

頁: [1]

琼殿技术论坛's Archiver

[React] Next.js