2020-02-14, Next.js getting started

看過了幾個不同的視頻教學，跟著做，發生有些和現況不一樣，因此再次回歸官網教程。

https://nextjs.org/docs/getting-started

在這基礎，學以致用，增加一個新的頁面，效果和代碼如下，

有在其它教程看過說明，在這的 HomePage 可以是任何其它的命名，主要是 export 是在 mark.js ，按照 next.js 做生成 mark 的頁面，甚至 function 的寫法可以是有不同的表達方式，官網這個寫法容易理解，可以先用。另外也可以不命名 HomePage，直接以匿名方式  export ，這些差異可能讓初學者在原地打轉了幾下，理解了就可以讀懂不同的寫法，自己使用或是團隊協同可定規範。

發現了要讀懂官網教程，最實際是跟著做，慎思明辨，因為有可能是我們對英文本身的理解有些某種程度的障礙，也有可能是官網的教程和更新的版本不完全匹配。

基本上一個觀念就是，新的技術會包住很多現有的技術，要學的多細，是自我一個選擇，一些常用的指令和設定等，經過反覆使用驗証形成習慣，會有人像是做打包集成一樣。

目前的理解是，使用  Next.js 會比直接使用 React.js 來得快，因為Next.js 是使用 React.js 為基礎的 framework，不僅僅是方法論，而是提供了一個像是標準廠房立即可用的框架。一般來講，由無到有，是比較難的，有一個範例，跟著做是比較容易的，也不見得需要什麼大道理。

要達到下圖左的效果，

其實只要一個 npm init next-app

官網上說明了，那個指令涵蓋了，以下這些動作，

如果不用心讀一下，會以為

做了

npm init next-app

還要做
npm install next react react-dom