国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Next.js之基礎概念（二）

DirtyMind / 3104人閱讀

摘要：樣式在中寫樣式，一般可以歸為類，一類是基于文件的傳統方式包括，等，另一類則是。我們回到我們的代碼中，更改，代碼如下在標簽中，我們寫我們的，必須包含在中，否則會報錯。至此，的基礎概念已經介紹完了，更高級的用法，可以參考官方的例子。

本篇教程基于上一篇的基礎，主要講解服務端渲染，樣式以及部署相關的一些知識，若你沒有看過上一篇的內容，或者你看過又忘了，建議重新去看一遍。

順便說一句，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。

    文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

    轉載請注明本文地址：http://specialneedsforspecialkids.com/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元查看
    <