<a href="https://nextjs.org/">https://nextjs.org/</a>太多的讚揚必須給next.js。這其實是我在為<a href="https://www.memopresso.com/">memopresso</a>的某一個專案中所使用到的技術。在這之前對他的理解只有到<figure class="table ck-widget ck-widget_selectable" contenteditable="false"><div class="ck ck-widget__selection-handler"><svg class="ck ck-icon" viewBox="0 0 16 16"><g><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0 0 1-.5.5H12z"></path><path fill-opacity=".256" d="M1 1h14v14H1z"></path><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"></path><path fill-opacity=".254" d="M1 1h14v14H1z"></path></g></g></svg></div><table><tbody><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">SPA</td><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">SSR</td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">React</td><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">Next</td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">Vue</td><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">Nuxt</td></tr></tbody></table></figure>這樣的程度。實際上也是只有這樣(囧)。不過ssr在部署上比較麻煩，這裡就不談這個部分，只會分享關於我用它寫出一個專案的一些小心得。<blockquote><a href="https://loadimg.cc/">Loadimg</a>(請安心前往^^)</blockquote> 首先因為他是react生態系的一環，所以基本上也是適合單向綁定的架構，此外也都具有react原本的生命週期、Component、render function...。一樣帶著funtional programming的概念就能完全上手啦！ 官網寫到它的好處：<blockquote>SEO friendlystatic websitePWA、eletron、desktop</blockquote>真的有人會想在強調seo的網頁上做麻煩的service worker嗎??? &nbsp;使用nextJS開發時有一些在react專案上不用考慮的優點<blockquote>webpack-based dev environment&nbsp;navigation link</blockquote>沒錯，原先要在react專案上實行的<a href="https://webpack.js.org/concepts/hot-module-replacement/">hot module replacement</a>(熱加載)，在next.js的專案上完全不用考慮，可以直接使用另外跳轉頁面用的&lt;Link&gt;雖然不是用像是react-router或react-router-dom的Link，而是用next的Link，但是也只差在這裡唷。而會在next.js中出現的小問題則有這些<blockquote>router vs dynamic page(?)next.config.jscssi18nheadercomponent(?)request(?)</blockquote>首先是他router的概念所有要渲染的頁面都會定義在pages這個資料夾下面，與原先react-router要做的事不同我們可能會在react專案中某個檔案裏面定義一個前端路由的路徑，像是<blockquote>&lt;Route path="/article/:id" component={Article} /&gt;</blockquote>但是在next.js的專案裡面沒有這個概念，你要渲染這個頁面你就要定義成資料夾如果要動態的路由則要將資料夾名稱加上中括號，像是：<blockquote>pages/article/[articleId]</blockquote>這個params就會傳入該頁index當中construtor的getInitialProps，然後就能做初始化頁面前的準備。 第二個麻煩的事情是css你一樣可以在某個container或component當中使用<blockquote>import"./style.scss"</blockquote>但是你只能用next提供的css loader而且要定義在next.config.js當中，而且他的寫法還跟webpack.config.js有一些小小差異<blockquote>constwithSass&nbsp;=&nbsp;require("zeit/next-sass")module.exports&nbsp;=&nbsp;withSass({&nbsp;&nbsp;&nbsp;&nbsp;webpack&nbsp;(config,&nbsp;options)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;config.module.rules.push({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;test:&nbsp;/.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;use:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loader:"url-loader",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limit:100000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;returnconfig&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}})</blockquote>像是這樣，一個簡單用url-loader配置圖片資源的config但是包在withSass裡面。可用的有這些<blockquote><ul><li><a href="https://github.com/zeit/next-plugins/tree/master/packages/next-css">@zeit/next-css</a></li><li><a href="https://github.com/zeit/next-plugins/tree/master/packages/next-sass">@zeit/next-sass</a></li><li><a href="https://github.com/zeit/next-plugins/tree/master/packages/next-less">@zeit/next-less</a></li><li><a href="https://github.com/zeit/next-plugins/tree/master/packages/next-stylus">@zeit/next-stylus</a></li></ul></blockquote> 或是寫在jsx裡面<blockquote>&lt;style jsx&gt;{` &nbsp;body{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;background: red; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp;p { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;color: blue; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp;`}&lt;/style&gt;</blockquote>又或是直接寫css-in-js，這也是支援的 再來是i18n的處理情況有些網頁會將i18n做在url上，這個情況也屬於動態路由那就要將多國語系的設定再寫進一個page資料夾處理 第四個麻煩點是seo需要的header資料你一樣會在getInitialProps裡面拿到url params，再進行額外非同步請求取得頁面header資料再做渲染header這時候你就會再回傳給functional component做jsx寫入因此把header寫成重用性高的component非常必要 而當遇到想要將重用性高的、可以變成共用component的元件時就只能將它放在根目錄，並定義一個components的資料夾這與原先react開發不同，你可能會放在src/components下面，與其他的container同級但這個pages優先的架構你會變成把components、static assets放在更上層的資料夾，這點在開發上就會變得需要注意 最後是network request原先我想到的ssr是像php或nodejs一樣，連同sql和ui寫在一起但next.js竟然還可以做到資料與視圖分離，就跟react一模一樣！竟然還能在server-side-render上做非同步請求，真是太神了(感覺伺服器端就很吃力囧)但是當頁面渲染完成後，使用者仍須在頁面上有其他request操作時你依然要另外定義那些request和處理那些response再做渲染 完成專案後，你也只需要在terminal下：<blockquote>npm&nbsp;run&nbsp;gulp&nbsp;prod&nbsp;&amp;&amp;&nbsp;next&nbsp;build</blockquote>一個SSR的專案就誕生了！他的結構會是<blockquote>/cache/server/static</blockquote>cache放loader、webpack的配置檔案、server放路由資料夾存取權限static放靜態資料和打包完的css或js然後你就能在你的伺服器端下：<blockquote>&nbsp;&nbsp;&nbsp;&nbsp;"start":&nbsp;"next&nbsp;start&nbsp;-p&nbsp;8080"</blockquote>你的SSR服務就啟起來囉