浮华与是非

Nextjs快速上手

10/16/2024 Nextjs

# 前言

准备使用blog项目来学习Nextjs，nextjs是react官方推荐使用的。

# 项目搭建

npx create-next-app blog创建，nextjs14要求node版本≥18.17.0。本文用的是nextjs15，node环境是22. 9. 0。

项目生成后的目录结构及配置文件了解一下。

nextjs14已经集成了 tailwindcss，有个demo网站可参考： https://www.creative-tim.com/ (opens new window)

20241016171737.png

nextjs 字体参考网站：

# 路由

# 路由页面

规则：

  • 1.所有页面都在app目录下，页面文件名用page. js或者page. jsx或者page. tsx。
  • 2.app目录下的page对应根页面，如http: //loaclehost: 3000访问页面。而app/dashboard目录下的page对应的是http: //loaclehost: 3000/dashboard访问页面。 1729034055338.jpg
  • 3.没有page的文件夹，不可公开访问，此文件夹可用于存储组件、样式表、图像或其他共定位文件。

# 布局和模板

除了page文件特殊外，还有两个文件特殊一个是布局文件layout，另一个是template文件。这两个文件的作用是给route创建UI。 规则：

  • 1.每个路由文件夹都可以有一个layout. js布局文件，布局是在多个路由之间共享的UI。在导航时，布局会保留状态，保持交互式，并且不会重新渲染。布局也可以嵌套。
    1. 根布局文件是必须的，并且必须包含html和body，并且不能将其更改为 客户端组件 1729035118210.jpg 布局的嵌套。

# 模板

模板与布局相似，因为它们会包装每个子布局或页面。与切换路由持续存在并保持状态的布局不同，模板为导航中的每个子节点创建一个新实例。这意味着当用户在共享模板的路由之间导航时，将挂载组件的新实例，重新创建DOM元素，不保留状态，并重新同步效果。

在某些情况下，您可能需要这些特定的行为，而模板将是比布局更合适的选择。例如:

  • 依赖于使用效果 (例如记录页面浏览量) 和useState (例如每页反馈表) 的功能。
  • 更改默认框架行为。例如，布局内部的悬念边界仅在第一次加载布局时显示后备，而在切换页面时不显示后备。对于模板，回退显示在每个导航上。 模板可以通过从template.js文件中导出默认的React组件来定义。组件应接受children prop。
export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}
1
2
3
<Layout>
  {/* Note that the template is given a unique key. */}
  <Template key={routeParam}>{children}</Template>
</Layout>
1
2
3
4

# MetaData

这个是next提供的操作标题和meta的API，包括网站图标favicon。 ex: app/page.tsx

import { Metadata } from 'next'
 
export const metadata: Metadata = {
  icon: {  // favicon 可以直接放在 项目根目录里面，create-next-app 默认自带了，但是需要清理一下缓存浏览器才能看
    icon: '/icon.png',
    shortcut: '/shortcut-icon.png',
    apple: '/apple-icon.png',
    other: {
      rel: 'apple-touch-icon-precomposed',
      url: '/apple-touch-icon-precomposed.png',
    },
  },
  title: '网站标题',
  description: '...',
}
 
export default function Page() {
  return 'Home Page'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 链接和导航

在nextjs中路由导航有4种方式

  1. 使用 <Link>组件
  2. 使用 useRouterhook (客户端组件)
  3. 使用 redirect 方法(服务端组件)
  4. 使用原生 History API

usePathname()是客户端组件钩子，可以获取当前页面url的pathname。 客户端组件使用时，必须在文件顶部标明 'use client'

'use client'
 
import { usePathname } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Current pathname: {pathname}</p>
}
1
2
3
4
5
6
7
8

# Loading UI and Streaming

特殊文件 loading.js 帮助您使用 React Suspense 创建有意义的加载用户界面。遵循这种约定，您可以在路由段内容加载时从服务器显示即时的加载状态。一旦渲染完成，新内容会自动替换进来。

# 错误处理 Error Handing

error.js 文件约定允许您优雅地处理嵌套路由中出现的意外运行时错误。

# 重定向 Redirecting

# 路由组 Route Groups

路由组约定：app目录下用英文括号包括的文件目录不会在路由中体现，而且每个路由组可以有自己的根布局（RootLayout） Pasted image 20241016142257.png 要创建多个根布局，需要移除顶层 layout.js 文件，并在每个路由组内添加一个 layout.js 文件。这对于将应用程序划分为具有完全不同用户界面或体验的部分非常有用。每个根布局都需要添加 <html>和<body> 标签。

意思就是app下的RootLayout可以不删除，路由组还是会共用，如果删除了，则每个路由组下面必须要有layout.js并且必须添加html和body标签。

# 项目结构约定 Project Organization

next中并不会限制路由文件的命名，但是并不是所有文件都需要变成路由， next约定

  • 只有在 /app 目录下的文件夹并且只有 pages.js 和 route.js 添加后才会成为路由。
  • 非路由文件不一定要放到 /app 目录下，可以放到其外面。
  • 文件名添加下划线代表私有文件夹：/_lib ，不会使用其作为路由，可以用来将UI逻辑于逻辑分开

# 动态路由 Dynamic Routes

通过将文件夹名称用方括号包起来 [name] 创建动态路由，如 请求url/project/id=> project目录下[id]文件的 page.js

# 并行路由 Parallel Routes

并行路由是使用命名槽创建的。插槽是使用 @folder 约定。 Pasted image 20241016170348.png 插槽作为 props 传递给共享的父布局。在上面的例子中，app/layout.js 中的组件现在接受 @analytics 和 @team 插槽 props，并且可以与 children props一起并行渲染它们

export default function Layout({
  children,
  team,
  analytics,
}: {
  children: React.ReactNode
  analytics: React.ReactNode
  team: React.ReactNode
}) {
  return (
    <>
      {children}
      {team}
      {analytics}
    </>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

但是，槽不是路由段，不会影响 URL 结构。例如，对于 /@analytics/views，URL 将为 /views，因为 @analytics 是一个插槽。 {children} 是一个隐式的插槽，app/page.js 等同于 app/@children/page.js 。

# 路由拦截 Intercepting Routes

(.) 匹配同一级别的区段 (..) 上一级

Last Updated: 2/15/2025, 2:22:53 PM