next.js项目基础入门

项目结构

app：应用路由器
pages：页面路由器
public：静态资源
src：可选的应用程序源文件夹
app路由约定(部分)：
layout：布局
page：首页
error：错误页面
notFound：页面未找到的页面

动态路由

通过[id]的形式使用

Layout

是在多个页面之间共享的UI，接收一个children

页面链接和导航

页面之间的连接可以使用‘Link，,’

 <a href="https://www.nextjs.cn">Next.js!</a>
<Link href="/posts/first-post"><a>this page!</a></Link>

usePathname（）

可以使用usePathname（）来确定链接，比如
cosnt pathname=usePathname()
pathname=startsWith(‘next/link’)//判断路由是否以’next/link’开头

useRouter（）

编程的方式更改路由
cosnt router=useRouter()
router.push（…）

动态路由

首先创建动态路由页面

访问的路径：/post/1

当前页面获取参数

import { useRouter } from 'next/router'
const Post = () => {
const router = useRouter()
const { id } = router.query
}

路由组

通过（此处是文件夹名）的形式实现路由分组，路由组不参与url组成
路由组可以用来给每个组创建不同的布局

suspense

通过<suspense fallback={<Loading/>}>这种形式可以在加载之前显示（例如骨架屏）

并行路由

使用@pages（文件夹名）作为文件夹名来创建文件夹作为并行路由

拦截路由

使用model，例如点击出现弹出层等

中间件（middleware）

用户发请求时中间件判断是否登录，未登录跳转登录页

静态渲染动态渲染

在静态路由中，组件在构建时在服务器上呈现，工作结果被缓存在后续请求中重用
在动态路由中，组件在请求时在服务器上呈现

服务端组件和客户端组件

服务端组件

服务端组件就是在服务端渲染的组件，在next.js v13中，只要是在app目录内的页面，全部默认为服务端组件
服务端组件的优势
● 数据获取：服务端组件具备完整的服务端能力，可以直接与数据库或者其它数据源进行交互，消除了需要从客户端到服务器的额外请求，从而加速了数据获取
● 安全性：因为渲染是在服务器上进行了，所以可以在服务器上使用敏感的API密钥或者令牌，并且不需要担心被暴露给客户端用户
● 缓存：服务端渲染结果可以被缓存。对于经常被访问的页面，可以存储已经渲染的HTML
● 流式传输

注意：服务端组件是在服务端运行的，所以没有调用浏览器API的能力，暂时不支持交互，比如要使用window.XXX，useState，useEffect等，需要在文件开头使用’use client‘声明

服务端组件渲染策略

三种策略：静态渲染，动态渲染，流式渲染

静态渲染（默认）

路由会在构建时进行渲染，或者在数据重新验证后在后台运行，结果会被缓存。这种方式适合静态博客或产品介绍页面

动态渲染

在渲染过程中，如果nextJS发现有动态函数或未缓存的数据请求，会自动切换为动态渲染整个路由
动态函数依赖于只能在请求时知道的信息，如用户的 cookie、当前请求头或 URL 的搜索参数。

流式渲染

通过流式处理，路由会在请求时在服务器上渲染。当工作准备就绪时，会将其分成几块并以流式传输到客户端。这样用户就能在页面完全呈现之前看到页面预览
流式渲染适合应用于优先级较低的用户界面，或依赖于较慢数据获取速度的用户界面。例如，产品页面上的评论。

客户端组件

在app文件夹中，默认是服务端组件，如果要使用客户端组件，只需要在文章开头添加”use client“指令
使用use client等于是声明了一个服务器和客户端组件模块之间的边界，也就是说，如果一个文件顶部有这个指令，那么导入该文件的所有其它模块（包括子组件）都将被视为客户端捆绑的一部分