next.js提供的能力有哪些

Next.js 是一个基于 React 的现代全栈框架,提供了丰富的开箱即用功能,以下是其主要能力的全面总结:


1. 渲染方式

  • 静态生成 (SSG)

    • getStaticProps:构建时获取数据生成静态页面
    • getStaticPaths:动态路由的静态生成
    • 适用场景:博客、文档、营销页等内容不变的页面
  • 服务器端渲染 (SSR)

    • getServerSideProps:每次请求时获取最新数据
    • 适用场景:个性化内容、实时数据仪表盘
  • 客户端渲染 (CSR)

    • 使用 useEffect/SWR 客户端获取数据
    • 适用场景:交互复杂的应用部分
  • 增量静态再生 (ISR)

    • revalidate 参数:定期重新生成静态页面
    • 适用场景:频繁更新的内容(如电商商品页)

2. 路由系统

  • 文件系统路由

    • pages/app/ 目录自动映射为路由
    • 动态路由:[slug].js[...catchAll].js
  • App Router (Next.js 13+)

    • 嵌套路由:app/dashboard/settings/page.js
    • 并行路由:@analytics 特殊目录
    • 拦截路由:(.)dashboard 模态框场景
  • 高级路由功能

    • 路由组:(marketing)/about/page.js
    • 中间件:路由请求拦截处理
    • 编程导航:useRouter 钩子

3. 性能优化

  • 图片优化

    • 组件:自动优化/懒加载/响应式
    • 支持 WebP/AVIF 等现代格式
  • 字体优化

    • 自动托管字体文件并添加 @font-face
  • 脚本优化

你可能感兴趣的:(开发DEMO,javascript,开发语言,ecmascript)