學習 Next.js: 入門

Miracle 發布于2019-08-20 16:54 / 2184人閱讀

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

原始文檔在 https://github.com/developerw... 現在搬過來.

學習 Next.js: 入門
學習 Next.js: 頁面之間的導航
學習 Next.js: 使用共享組件
學習 Next.js: 創建動態內容
學習 Next.js: 使用路由掩碼創建干凈的URL
學習 Next.js: 干凈URL的服務器支持
學習 Next.js: 獲取數據
學習 Next.js: 部署

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

入門

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

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

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

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

想一下我們如何使用PHP創建Web應用程序. 首先創建一些文件, 編寫PHP代碼, 然后部署. 不用擔心路由的問題, Web應用程序只是在服務器端運行, 并且輸出HTML而已.

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

服務器端渲染(默認)

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

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

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

可以使用Express 或其他Node.js服務器實現

使用Babel和Webpack配置定制

設置

Next.js 可以在Windows, Mac和Linux運行. 只需要在系統中安裝Node.js即可開始構建Next.js應用程序.

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

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

運行下面的命令, 創建一個示例項目:

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

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

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

現在, 一切就準備好了, 你可以運行下面的命令來啟動開發服務器了.

npm run dev

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

404 頁面

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

創建第一個頁面

現在我們來創建第一個頁面. 在 pages 目錄下創建一個名稱為 index.js 的文件, 內容如下:

const Index = () => {
  return (
    
      Hell Next.js
    
  )
}
export default Index

或者

const Index = () => (
  
    Hell Next.js
  
)

export default Index

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

確保你的 React 組件為默認導出
譯注: (default關鍵字)

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

HTML標簽), 如下:

const Index = () => (
  
    Hello Next.js
  
)

export default Index

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

錯誤處理

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

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

你太棒了

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

Bugfix

2017-10-11: 修復如下問題

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

GPU云服務器云服務器 next.js next.js 樣式 Next.js 12 正式發布、Yarn 編程學習入門學習

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83247.html

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

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

rockswang 2019-08-23 11:38 評論0 收藏0
學習 Next.js: 使用路由掩碼創建干凈的URL

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

silenceboy 2019-08-20 16:56 評論0 收藏0
學習 Next.js: 頁面之間的導航

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

layman 2019-08-20 16:54 評論0 收藏0
學習 Next.js: 創建動態內容

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

caohaoyu 2019-08-20 16:56 評論0 收藏0
學習 Next.js: 部署

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

laznrbfe 2019-08-20 19:08 評論0 收藏0