寫文章

首頁手記 nextjs文檔

nextjs文檔

標簽：

JavaScript

开始

起步

安装

npm install --save next react react-dom

Next.js 只支持 React 16

由于某些原因我们不得不放弃支持 React 15

添加下面的配置到package.json 的script字段中

{    "script": {        "dev": "next",        "build": "next build"
        "start": "next start"
    }
}

之后，文件系统就是主要的API。每一个.js文件都成为一条被自动处理和呈现的路径

在项目中创建 ./pages/index.js

 export default () => <div>Welcome to next.js!</div>

运行 npm run dev 跳转 http://localhost:3000 ,如果想要使用其他端口，你可以使用 npm run dev -- -p <your port here>

目前为止我们做到：

代码的自动的转换与打包(使用webpack和babel)
代码热更新
服务器端渲染 ./pages
静态文件服务 ./static/ 映射到 /static/

很简单吧！看看这个案列 sample app - nextgram

代码的自动拆分

您声明的每个import都会捆绑并与每个页面一起提供。这意味着页面从不加载不必要的代码

import cowsay from 'cowsay-browser'export default () =>  <pre>
    {cowsay.say({ text: 'hi there!' })}  </pre>

CSS

内联css支持

案例

Basic css

我们支持 styled-jsx 书写CSS, The aim is to support "shadow CSS" similar to Web Components, which unfortunately do not support server-rendering and are JS-only.

export default () =>  <div>
    Hello world    <p>scoped!</p>
    <style jsx>{`
      p {
        color: blue;
      }
      div {
        background: red;
      }
      @media (max-width: 600px) {
        div {
          background: blue;
        }
      }
    `}</style>
    <style global jsx>{`
      body {
        background: black;
      }
    `}</style>
  </div>

更多案例请查看 styled-jsx 文档

css-in-js

案列

Styled components
Styletron
Glamor
Glamorous
Cxs
Aphrodite
Fela

可以使用现有的 CSS-in-JS 方案,最简单的方式是使用内联

export default () => <p style={{ color:'red' }}>hi</p>

要使用更复杂的CSS-in-JS解决方案，您通常必须为服务器端呈现实现样式刷新。我们通过允许您定义自己的包装每个页面的自定义<Document>组件来实现这一点。(To use more sophisticated CSS-in-JS solutions, you typically have to implement style flushing for server-side rendering. We enable this by allowing you to define your own custom <Document> component that wraps each page.)

引入 CSS / Sass / Less / Stylus files

要支持导入.css、.scss、.less或.styl文件，您可以使用这些模块，它们为服务器呈现的应用程序配置合理的默认值

@zeit/next-css
@zeit/next-sass
@zeit/next-less
head
案列
- Head elements
- Layout component
我们公开了一个内置组件，用于向<head>内追加元素，类似于react-helmet
```
import Head from 'next/head'export default () => 
  <div>
    <Head>
      <title>My page title</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    </Head>
    <p>Hello world!</p>
  </div>
```
为了避免重复标签在你的<head>，你可以使用key属性，这将确保标签只呈现一次:
```
import Head from 'next/head'
export default () => (  <div>
    <Head>
      <title>My page title</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" key="viewport" />
    </Head>
    <Head>
      <meta name="viewport" content="initial-scale=1.2, width=device-width" key="viewport" />
    </Head>
    <p>Hello world!</p>
  </div>)
```
上面的案列只有第二个会被渲染
在组件被卸载时，<head>内的内容也会卸载，请不要假设组件更换追加head
请求数据与组件的生命周期
案列
- Data fetch
当您需要状态、生命周期钩子或初始数据填充时，您可以导出一个 React.Component(而不是无状态函数，如上面所示)
(When you need state, lifecycle hooks or initial data population you can export a React.Component (instead of a stateless function, like shown above):)
```
import React from 'react'export default class extends React.Component {  static async getInitialProps({ req }) {    const userAgent = req ? req.headers['user-agent'] : navigator.userAgent    return { userAgent }
  }

  render() {    return (      <div>
        Hello World {this.props.userAgent}      </div>
    )
  }
}
```
在页面加载时加载数据，我们使用 getInititialProps, 它是一个异步的静态方法，它可以异步地获取任何解析为JavaScript普通对象的内容,去填充部分props
从getInitialProps返回的数据在服务器呈现时被序列化，类似于JSON.stringify。确保getInitialProps返回的对象是一个普通对象，而不使用Date、Map或者set
初始加载的页面，getInititialProps是仅在服务器上执行的，getInitialProps只有在切换路由或者使用Link和路由api时才会在客户端执行
getInitialProps不可以使用在 children components 只可以使用在 Page 中
如果在getInitialProps中使用一些服务器模块，请确保正确地使用它们。否则，它导致你的app变慢
您还可以为无状态组件定义getInitialProps生命周期方法:
```
const Page = ({stars}) =>
  <div>
    Next stars :{stars}
  </div>

Page.getInitialProps = async({req}) => {  const res = await fetch('https://api.github.com/repos/zeit/next.js')  const json = await res.json()  return { stars: json.stargazers_count }
}

export default Page
```
getInitialProps接收一个 context object 有如下属性：
- pathname - path section of URL
- query - query string section of URL parsed as an object
- asPath - String of the actual path (including the query) shows in the browser
- req - HTTP request object (server only)
- res - HTTP response object (server only)
- jsonPageRes - Fetch Response object (client only)
- err - Error object if any error is encountered during the rendering
路由
With<Link>
案列
- ```
// pages/about.jsexport default () => <p>Welcome to About!</p>
```
  使用<Link prefetch>可以达到最大的性能，同时在后台跳转和数据预取 prefetch&Link
  客户端路由的行为与浏览器完全相同
  每个顶级组件都使用以下API接收url属性：
  第二个作为push和replace的参数是URL的可选装饰。在服务器上配置自定义路由时很有用。
  With URL Object
  
  作者：will___
  链接：https://www.jianshu.com/p/258fba795ca2
  x

點擊查看更多內(nèi)容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學(xué)習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優(yōu)質(zhì)文章

正在加載中

慕虎7371278

手記
篇

粉絲

202

獲贊與收藏

877

關(guān)注作者，訂閱最新文章

閱讀免費教程

JavaScript 入門教程

80個小節(jié) 321996 2280

后端通用面試教程

41個小節(jié) 32253 360

網(wǎng)絡(luò)編程入門教程

20個小節(jié) 13299 250

推薦

評論

收藏

共同學(xué)習，寫下你的評論



感謝您的支持，我會繼續(xù)努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學(xué)

大額優(yōu)惠券免費領(lǐng)

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優(yōu)惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復(fù)制

優(yōu)惠券可用于購買實戰(zhàn)課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學(xué)習，選課去


第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

nextjs文檔

开始

起步

代码的自动拆分

CSS

内联css支持

css-in-js

引入 CSS / Sass / Less / Stylus files

head

请求数据与组件的生命周期

路由

閱讀免費教程