React 服务端渲染框架：Next.js

最新推荐文章于 2024-04-23 08:46:39 发布

爱玲姐姐

最新推荐文章于 2024-04-23 08:46:39 发布

阅读量1.4k

点赞数 1

分类专栏：大前端 SSR React 文章标签： React NextJS SSR

本文链接：https://blog.csdn.net/jal517486222/article/details/112798540

版权

React 服务端渲染框架：Next.js

文章出处：拉勾大前端高薪训练营

练习代码地址

Next.js是React服务端渲染应用框架.用于构建SEO友好的SPA应用.

支持两种预渲染方式，静态生成和服务器端渲染.
基于页面的路由系统，路由零配置
自动代码拆分.优化页面加载速度.
支持静态导出，可将应用导出为静态网站.
内置CSS-in-JS库styled-jsx
方案成熟，可用于生产环境，世界许多公司都在使用
应用部署简单，拥有专属部署环境Vercel,也可以部署在其他环境.

一、创建 Next.js 项目

创建: npm init next-app next-guide
运行: npm run dev
访问: localhost:3000
临时安装 create-next- app 用于创建 Next.js 项目。

二、基于页面的路由系统

1. 创建页面

在Next.js中，页面是被放置在pages文件夹中的React组件.
组件需要被默认导出.
组件文件中不需要引入React.

pages/list.js

export default function List () {
   
  return (
    <div>List Page</div>
  )
}

访问地址是：http://localhost:3000/list
页面地址与文件地址是对应的关系.

2. 页面跳转

Link 组件默认使用 JavaScript 进行页面跳转.即 SPA 形式的跳转.
如果浏览器中 JavaScript 被禁用.则使用链接跳转.
Link 组件中不应添加除 href 属性以外的属性，其余属性添加到 a 标签上.
Link 组件通过预取(在生产中)功能自动优化应用程序以获得最佳性能.

import Link from 'next/link'

export default function Home() {
   
  return <div>
    Index Page works
    <Link href="/list"><a>Jump to List Page</a></Link>
  </div>
}

三、静态资源、元数据和 CSS

1. 静态资源

应用程序根目录中的 public 文件夹用于提供静态资源。

通过以下形式进行访问：

public/images/1.jpg -> /images/1.jpg
public/css/base.css -> /css/base.css

2. 修改页面元数据

通过 Head 组件修改元数据

import Head from 'next/head'

<>
  <Head>
    <title>next app</title>
  </Head>
</>

3. CSS 样式

3.1 内置 styled-jsx

在 Next.js 中内置了 styled-jsx, 它是一个 CSS-in-JS 库，允许在 React 组件中编写 CSS, CSS 仅作用于组件内部。

export default function Home() {
   
  return <>
    <Head>
      <title>Index Page</title>
    </Head>
    <div>
      Index Page works
      <Link href="/list"><a className="demo">Jump to List Page</a></Link>
      <img src="/images/1.jpeg" height

最低0.47元/天解锁文章

爱玲姐姐

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
React 服务端渲染框架：Next.js

React 服务端渲染框架：Next.js文章出处：拉勾大前端高薪训练营练习代码地址Next.js是React服务端渲染应用框架.用于构建SEO友好的SPA应用.支持两种预渲染方式，静态生成和服务器端渲染.基于页面的路由系统，路由零配置自动代码拆分.优化页面加载速度.支持静态导出，可将应用导出为静态网站.内置CSS-in-JS库styled-jsx方案成熟，可用于生产环境，世界许多公司都在使用应用部署简单，拥有专属部署环境Vercel,也可以部署在其他环境.一、创建 N
复制链接

扫一扫