资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Next.js之基础概念（二）

Next.js之基础概念（二）

DirtyMind / 3002人阅读

摘要：样式在中写样式，一般可以归为类，一类是基于文件的传统方式包括，等，另一类则是。我们回到我们的代码中，更改，代码如下在标签中，我们写我们的，必须包含在中，否则会报错。至此，的基础概念已经介绍完了，更高级的用法，可以参考官方的例子。

本篇教程基于上一篇的基础，主要讲解服务端渲染，样式以及部署相关的一些知识，若你没有看过上一篇的内容，或者你看过又忘了，建议重新去看一遍。

顺便说一句，Next.js 3.0的版本在前几天已经正式对外发布，本篇教程仍然基于2.x的版本，若你使用3.0的版本，代码上可能有不一致的地方，需要你留意一下。

为了快速开始，咱们直接使用官方的例子进行讲解，先把代码拷贝下来：

git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout clean-urls-ssr

项目拷贝下来后我们进入目录，安装一下依赖并启动：

cd learnnextjs-demo
npm install
npm run dev

打开页面，即可看到如下效果：

服务端渲染

官方的例子是根据TVMaze提供的api来展示电视节目，因此我们需要安装isomorphic-unfetch用于获取远程数据：

npm install  isomorphic-unfetch -S

然后将以下代码替换到pages/index.js中：

import Layout from "../components/MyLayout.js"
import Link from "next/link"
import fetch from "isomorphic-unfetch"

const Index = (props) => (
  
    
Batman TV Shows

    
  
)

Index.getInitialProps = async function() {
  const res = await fetch("https://api.tvmaze.com/search/shows?q=batman")
  const data = await res.json()

  console.log(`Show data fetched. Count: ${data.length}`)

  return {
    shows: data
  }
}

export default Index

上面的代码中，写在Index.getInitialProps中的内容，既可以跑在server端，也可以跑在浏览器端，当我们刷新页面时，可以看到server段的控制台输出了：

Show data fetched. Count: 10

但在浏览器控制台中却没有看到输出，那什么时候这段代码会跑在浏览器端呢？那就是当你通过客户端路由进来的时候，这段代码才会执行，我们来更改一下代码，

server.js中，找到包含/p/:id的地方，并替换如下：

server.get("/p/:id", (req, res) => {
    const actualPage = "/post"
    const queryParams = { id: req.params.id }
    app.render(req, res, actualPage, queryParams)
})

同时，更改pages/post.js:

import Layout from "../components/MyLayout.js"
import fetch from "isomorphic-unfetch"

const Post =  (props) => (
    
       
{props.show.name}

       
{props.show.summary.replace(/<[/]?p>/g, "")}

       
    
)

Post.getInitialProps = async function (context) {
  const { id } = context.query
  const res = await fetch(`https://api.tvmaze.com/shows/${id}`)
  const show = await res.json()

  console.log(`Fetched show: ${show.name}`)

  return { show }
}

export default Post

这时候当我们是从首页的链接点进去post页面时，会由post页面从浏览器端发出请求获取数据，要是在这个页面直接刷新页面，则会由服务端获取数据，这就是Next.js实现的ssr，是不是感觉很简单。

另外，如果有些代码只希望在服务端执行，而不希望浏览器端执行，在可以根据context里面有没有包含req这个字段来判断，代码如下：

   Post.getInitialProps = async function (context) {
     if(context.req) {
         // 只会在服务端执行
     }
   
     return { show }
   }

上面的代码其实是有问题的，想想看，我希望在服务端执行的代码，自然不希望webpack把它打包到客户端，否则会增大打包后的脚本，用户体验也不好，解决方案可以参考这里，这里就不展开了。

样式

在react中写样式，一般可以归为2类，一类是基于css文件的传统方式（包括sass，postcss等），另一类则是css in js。

基于传统的方式写css，在Next.js中会有些问题，特别是ssr的时候，因此，官网给出的解决方案是使用css in js，在Next.js中，已经预装了一个css in js的框架叫styled-jsx。

我们回到我们的代码中，更改pages/index.js，代码如下：

import Layout from "../components/MyLayout.js"
import Link from "next/link"

function getPosts () {
  return [
    { id: "hello-nextjs", title: "Hello Next.js"},
    { id: "learn-nextjs", title: "Learn Next.js is awesome"},
    { id: "deploy-nextjs", title: "Deploy apps with ZEIT"},
  ]
}

export default () => (
  
    
My Blog

    
    
  
)

在标签 )

所以，你需要把样式写在子组件中：

const PostLink = ({ post }) => (
  
  • 
    
      {post.title}
    
    
  
    • 
)

    或者，使用全局选择器(global selectors)，只需在style标签中加一个global关键字，如下：

    部署Next.js应用

    部署Next.js也是一件非常简单的事情，我们更改一下我们的package.json文件，在scripts字段中添加build和start：

    "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "next start"
}

    然后执行：

    npm run build
npm run start

    npm run build命令会打包适用于生产环境的代码，npm run start则会启动我们的应用，默认端口为3000。

    若想启动两个应用实例，只需要自定义端口即可，代码如下：

    "scripts": {
  "start": "next start -p $PORT"
}
    npm run build

PORT=8000 npm start
PORT=9000 npm start

    如上，会在8000及9000端口各自启动一个实例。

    至此，Next.js的基础概念已经介绍完了，更高级的用法，可以参考官方的例子：Next.js。

    超融合服务器 私有云 next.js next.js 样式 Next.js 12 正式发布、Yarn 之基础篇

    文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

    转载请注明本文地址：https://www.ucloud.cn/yun/87368.html

    相关文章

    • Next.js之基础概念

      摘要：是一个基于实现的服务端渲染框架，地址为。本文先从简单地基础概念开始，一步一步带大家认识。本篇教程到此结束，后面会跟大家介绍的服务端渲染及以及部署相关的一下概念及示例代码。 Next.js是一个基于React实现的服务端渲染框架，github地址为next.js。 使用Next.js实现服务端渲染是一件非常简单的事，在这里，你完全可以不用自己去写webpack等配置，Next.js全都帮...

      2bdenny 评论0 收藏0

    • Next框架与主流工具的整合（二）—— 完善与优化

      摘要：从概念来说，就是设备的物理像素与设备独立像素也就是逻辑像素，以下就称为逻辑像素的比率。通过这个标签，我们可以实现初始缩放，就可以达到的逻辑像素眼睛在设备上看起来的，换句话说可以在上充满竖屏的整个宽度。 前言：18年12月24日项目成功上线了，在经历了两周的线上bug、UI以及代码优化后，解决了不少问题，于是再完善与优化一下这个项目。 布局优化 高清配置 antd-mobile 自定义...

      teren 评论0 收藏0

    • 前端每周清单：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧

      摘要：前端每周清单第期微服务实践，与，组件技巧，攻防作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。 前端每周清单第 26 期：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧，HeadlessChrome 攻防 作者：王下邀月熊 编辑：徐川...

      wall2flower 评论0 收藏0

    • 前端每周清单半年盘点之 React 与 ReactNative 篇

      摘要：前端每周清单半年盘点之与篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。与求同存异近日，宣布将的构建工具由迁移到，引发了很多开发者的讨论。 前端每周清单半年盘点之 React 与 ReactNative 篇 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为...

      Barry_Ng 评论0 收藏0

    发表评论

    登陆后可评论

    0条评论

    DirtyMind

    男|高级讲师
    我要私信

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <