成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

學習 Next.js: 入門

Miracle / 2193人閱讀

摘要：原始文檔在現(xiàn)在搬過來學習入門學習頁面之間的導(dǎo)航學習使用共享組件學習創(chuàng)建動態(tài)內(nèi)容學習使用路由掩碼創(chuàng)建干凈的學習干凈的服務(wù)器支持學習獲取數(shù)據(jù)學習部署哪位分高的幫忙創(chuàng)建一個的標簽謝謝現(xiàn)暫時放在標簽下面了新建文章有時間限制一會全部發(fā)上來這是最近兩天

原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來.


學習 Next.js: 入門
學習 Next.js: 頁面之間的導(dǎo)航
學習 Next.js: 使用共享組件
學習 Next.js: 創(chuàng)建動態(tài)內(nèi)容
學習 Next.js: 使用路由掩碼創(chuàng)建干凈的URL
學習 Next.js: 干凈URL的服務(wù)器支持
學習 Next.js: 獲取數(shù)據(jù)
學習 Next.js: 部署


哪位分高的,幫忙創(chuàng)建一個 Next.js 的標簽, 謝謝. 現(xiàn)暫時放在reactjs標簽下面了. 新建文章有時間限制, 一會全部發(fā)上來, 這是最近兩天翻譯的 Next.js 學習資料, 原始文章在 http://learnnextjs.com
入門

創(chuàng)建一個單頁Javascript應(yīng)用程序是一件非常有挑戰(zhàn)的事情, 幸運的是, 開源世界給我們提供了一些好用的工具來簡化, 加速單頁應(yīng)用的開發(fā).

Create React App 就是這樣一種工具.

即使是這樣, 創(chuàng)建單頁應(yīng)用有非常高的學習曲線. 仍然需要我們學習客戶端路由, 頁面布局, 等技術(shù). 如果你還想要運行服務(wù)器端渲染(SSR: Server Side Rendering), 事情就變得更加困難了.

因此, 我們需要一個簡單并且可自定義的方案

想一下我們?nèi)绾问褂肞HP創(chuàng)建Web應(yīng)用程序. 首先創(chuàng)建一些文件, 編寫PHP代碼, 然后部署. 不用擔心路由的問題, Web應(yīng)用程序只是在服務(wù)器端運行, 并且輸出HTML而已.

但這里我們說的不是用PHP來創(chuàng)建Web應(yīng)用程序, 我們使用Javascript和React, 使用Next.js框架給我們提供能力:

服務(wù)器端渲染(默認)

自動代碼切分, 加速頁面加載

簡單的客戶端路由(基于頁面)

基于Webpack的開發(fā)環(huán)境, 支持熱模塊替換(HMR: Hot Module Replacement)

可以使用Express 或其他Node.js服務(wù)器實現(xiàn)

使用Babel和Webpack配置定制

設(shè)置

Next.js 可以在Windows, Mac和Linux運行. 只需要在系統(tǒng)中安裝Node.js即可開始構(gòu)建Next.js應(yīng)用程序.

除了需要一個文本編輯器編寫代碼, 一個終端調(diào)用命令之外, 沒什么別的是必須的.

如果在Windows上運行, 建議使用 PowerShell. Next.js可以工作在任何Shell和終端下. 但是本指南中, 我們使用UNIX相關(guān)的命令.
推薦在 Windows 下使用 PowerShell, 讓工作方便一些.

運行下面的命令, 創(chuàng)建一個示例項目:

mkdir hello-next
cd hello-next
npm init -y
npm install --save react react-dom next
mkdir pages

然后打開package.json, 添加下面的NPM腳本命令:

{
  "scripts": {
    "dev": "next"
  }
}

現(xiàn)在, 一切就準備好了, 你可以運行下面的命令來啟動開發(fā)服務(wù)器了.

npm run dev

在瀏覽其中打開: http://localhost:3000.

404 頁面

打開 http://localhost:3000, 我們看到的是一個 404 頁面. 這個時候 Next.js 沒有任何功能. 默認就是一個 404 頁面.

創(chuàng)建第一個頁面

現(xiàn)在我們來創(chuàng)建第一個頁面. 在 pages 目錄下創(chuàng)建一個名稱為 index.js 的文件, 內(nèi)容如下:

const Index = () => {
  return (
    

      
Hell Next.js

    

  )
}
export default Index

或者

const Index = () => (
  

    
Hell Next.js

  

)

export default Index

現(xiàn)在, 再次訪問 http://localhost:3000, 在頁面上你會看到 "Hello Next.js". 這里, 我們只是從 pages/index.js 模塊導(dǎo)出了一個簡單的 React 組件. 同理, 可以編寫你自己的模塊并且導(dǎo)出它.

確保你的 React 組件為默認導(dǎo)出
譯注: (default關(guān)鍵字)

現(xiàn)在, 我們在Index頁故意引入一個語法錯誤(刪除尾部的

HTML標簽), 如下:

const Index = () => (
  

    
Hello Next.js
  

)

export default Index

頁面將會顯示一個語法錯誤 There"s an error showing the syntax error.

錯誤處理

默認情況, Next.js 會在瀏覽器中直接顯示這些錯誤信息, 這方便你識別錯誤并且快速的搞定它.

你但你解決了這些錯誤, 頁面會執(zhí)行一個無刷新的更新. 這得益于Webpack提供的熱模塊替換功能, 在Next.js它是默認支持的.

你太棒了

看起來你已經(jīng)構(gòu)建了第一個Next.js應(yīng)用程序. 有什么想法? 如果你喜歡, 可以進一步深入下去.

Bugfix

2017-10-11: 修復(fù)如下問題

Index(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83247.html

相關(guān)文章

  • Next.js踩坑入門系列（一）— Hello Next.js!

    摘要：接下來我們運行一下。因此，我們需要新建一個目錄。接下在再重新啟動一下試試。因為默認開啟服務(wù)端渲染，也就無需我們進行任何的配置，因此現(xiàn)在這個極其簡單的應(yīng)用就是一個。代碼地址參考文章服務(wù)端渲染與打造高可靠與高性能的同構(gòu)解決方案 寫在前面 說實話，我個人還是覺得文筆越來越不錯了，以前的文章都是一個問題悶到天黑，文章寫的有點亂由于文章過于龐大導(dǎo)致不是一氣呵成的，思路有時候會很混亂。所以我也準備...

    rockswang 評論0 收藏0

  • 學習 Next.js: 使用路由掩碼創(chuàng)建干凈的URL

    摘要：原始文檔在現(xiàn)在搬過來學習入門學習頁面之間的導(dǎo)航學習使用共享組件學習創(chuàng)建動態(tài)內(nèi)容學習使用路由掩碼創(chuàng)建干凈的學習干凈的服務(wù)器支持學習獲取數(shù)據(jù)學習部署使用路由掩碼創(chuàng)建干凈的在前面的課程中我們學到了如何使用查詢串創(chuàng)建動態(tài)頁面一次為基礎(chǔ)我們一篇博客的 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學習 Next.js: 入門學習 Next.js: ...

    silenceboy 評論0 收藏0

  • 學習 Next.js: 頁面之間的導(dǎo)航

    摘要：原始文檔在現(xiàn)在搬過來學習入門學習頁面之間的導(dǎo)航學習使用共享組件學習創(chuàng)建動態(tài)內(nèi)容學習使用路由掩碼創(chuàng)建干凈的學習干凈的服務(wù)器支持學習獲取數(shù)據(jù)學習部署頁面之間的導(dǎo)航現(xiàn)在我們知道了如何創(chuàng)建一個應(yīng)用程序并且運行它我們的示例應(yīng)用程序只有一個簡單的頁面但 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學習 Next.js: 入門學習 Next.js: ...

    layman 評論0 收藏0

  • 學習 Next.js: 創(chuàng)建動態(tài)內(nèi)容

    摘要：原始文檔在現(xiàn)在搬過來學習入門學習頁面之間的導(dǎo)航學習使用共享組件學習創(chuàng)建動態(tài)內(nèi)容學習使用路由掩碼創(chuàng)建干凈的學習干凈的服務(wù)器支持學習獲取數(shù)據(jù)學習部署創(chuàng)建動態(tài)頁面現(xiàn)在我們知道了如何使用多個頁面創(chuàng)建一個基本的應(yīng)用程序為了創(chuàng)建頁面我們需要在磁盤上創(chuàng)建 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學習 Next.js: 入門學習 Next.js: ...

    caohaoyu 評論0 收藏0

  • 學習 Next.js: 部署

    摘要：原始文檔在現(xiàn)在搬過來學習入門學習頁面之間的導(dǎo)航學習使用共享組件學習創(chuàng)建動態(tài)內(nèi)容學習使用路由掩碼創(chuàng)建干凈的學習干凈的服務(wù)器支持學習獲取數(shù)據(jù)學習部署部署要部署一個應(yīng)用程序當然我們首先需要一個可部署的已經(jīng)開發(fā)完成的應(yīng)用程序以下面這個開發(fā)的小型博客 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來.學習 Next.js: 入門學習 Next.js: 頁面...

    laznrbfe 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<