tm nextjs starter
1.0.0
這是我截至 2018 年 8 月的最小但實用的 React 入門套件和演示應用程式。
如果您對 Javascript 感到厭倦，並且想要快速輕鬆地開始，請看看這個。開發現代 SPA React 應用程式並沒有比這簡單得多。
演示應用程式是一個靜態站點，一個基本的單頁面應用程序，具有一些按需延遲加載的可尋址頁面。它演示了基本的 CRUD 操作：1）列出電影，2）查看電影詳細信息，3）創建/編輯和 4）刪除電影。
該演示使用瀏覽器 localStorage 進行資料存儲，這意味著它無需後端即可運行。這些原始程式碼確實包含一個對 REST 後端進行真正的 AJAX 呼叫的模組 - 您只需要啟用該模組並編寫一個伺服器，您就可以很好地擁有一個真正的 Web 應用程式。我開發了 RESTPie3 Python REST API 伺服器，它實作了這個簡單的電影 API 作為範例。
該演示應用程式由一個簡單但功能強大的技術堆疊組成，它提供了創建現代網路應用程式的基本功能。它站在一些偉大圖書館的肩膀上：
├── /components/ # React components used by pages
│ └── /MyHeader.js # Site header component, just as an example
├── /pages/ # pages
│ ├── /_app.jsx # top level layout of the app, loaded once
│ ├── /about.jsx # about page
│ ├── /index.jsx # home page, lists movies
│ ├── /moviedetails.jsx # details page, views a movie
│ └── /movieedit.jsx # edit page, edits a movie
├── /static/ # static assets, accessed/exported as is
│ ├── /favicon.ico # favicon
│ └── /exampledata/
│ └── /movies.json # sample list of 4 movies - loaded initially
├── /styles/ # global SASS files
│ └── /layout.sass # main layout
├── config.js # app config, select ajax or localstorage
├── next.config.js # nextjs configuration, almost empty
├── package-lock.json # npm something
├── package.json # list of npm packages required
├── README.md # this doc
├── serverapi_ajax.js # API, talks AJAX to a real backend
├── serverapi_localstorage.js # API, talks to localStorage
└── store.js # data store, managed by MobX
以下是在本機電腦上執行啟動程式的方法：
$ git clone https://github.com/tomimick/tm-nextjs-starter
$ cd tm-nextjs-starter
$ npm install
$ npm run dev然後將瀏覽器指向 http://localhost:3000。
當修改任何依賴檔案時，變更會被熱加載並立即可見。享受開發吧！
Nextjs 是一個很棒的框架，它為混亂的 Javascript 開發領域帶來了適當的秩序。它透過處理配置和工具使 React 開發的開始變得容易，讓您從一開始就專注於核心應用程式。它提供了所有網頁應用程式實際上都需要的精心設計的最小核心功能。
簡言之，Next.js 的優點：
Nextjs 已經足夠成熟，大約在 2 年前發布，並且擁有健康的插件生態系統。 Webpack 用於基礎工作。
Nextjs 完全有可能在未來被更好的東西取代或合併，但它現在確實封裝了一些最佳實踐，值得嘗試。
Redux 通常是 React 應用程式狀態管理解決方案的第一站。它是早期可用的庫之一，在許多部落格中都被討論過，因此幾乎獲得了標準地位。
從第一次接觸 Redux 起，我就有了複雜的感覺。我總是喜歡自己思考和研究，在閱讀了許多 React+Redux 程式碼庫、評估了其他選項之後，我認為 Redux 及其功能性和純粹的範式對我來說有點抽象和過度設計。 （另外 Redux 也用在根本不需要的地方。太容易過度了。）
在我看來，MobX 提供了比 Redux 更簡單、更實用的狀態管理解決方案。更容易掌握和理解。它需要更少的樣板代碼。您擁有聲明可觀察的狀態，然後只需改變您的狀態，所有觀察者都會自動更新。 MobX 既能發揮作用，又不會礙事。
工程師確實爭論 Redux 是否更適合更大的應用程式或「真正的」應用程序，但這是一場永無止境的戰鬥。我的策略通常是保持我的程式碼精簡和簡潔，甚至不先嘗試開發一個「大」應用程式...
Nextjs 提供網站全域和頁面本機 CSS 樣式表的支援。
style jsx標籤內的頁面元件中（例如，請參閱 about.jsx）。在此示範中，我還嘗試了 CSS 網格功能，這是最新的 Web 佈局標準。 CSS 網格是一個強大的佈局工具，它最終提供了一種定義二維網格的可靠方法。它將改變我們建立佈局的方式。如果您還沒有學習或閱讀過 CSS 網格，2018 年是學習的好時機。瀏覽器支援已經很好了。它將很快成為主流。
使用 Nextjs 產生靜態網站的能力是一個重要的工具，它使得無需後端伺服器即可運行應用程式成為可能。您可以將網站匯出到 GitHub 頁面、Netlify 或 Amazon S3。 （但請檢查 Github 頁面中網站+連結前綴的一些問題。）
靜態產生的另一個優點是能夠將應用程式與任何 REST 後端連接起來，無論後端的語言是什麼。前端和後端的乾淨分離也提供了技術層面甚至團隊層面的模組化。
關於 SEO 的一個注意事項：要匯出具有動態資料的頁面的靜態版本，您需要在 next.config.js 設定中編寫所有頁面的腳本，請參閱此範例。
要產生靜態站點，只需運行
$ npm run export並且靜態檔案將在out資料夾中產生。
為了透過本機 www 伺服器在本地測試靜態站點，我快速執行一個 python 腳本：(python3 -m http.server)
$ npm run pyserve然後在 http://localhost:8000 上測試網站。
主頁的大小還不錯，壓縮後大約 94KB 。
瀏覽器載入主頁總共有 6 個請求，每個按需載入的新頁面都會發出一次js 請求（請記住，React 的全部內容都是 Javascript，而不是 HTML）。
Page Size Inspector Report
URL: https://nextjs.tomicloud.com/
REQUEST REQ BYTES
TOTAL___________________________________________6____94,159
Document________________________________________1_______916
-nextjs.tomicloud.com/ 916
Script__________________________________________4____92,836
-nextjs.tomicloud.com/_next.../index.js 1,053
-nextjs.tomicloud.com/_next/.../_app.js 2,506
-nextjs.tomicloud.com/_nex.../_error.js 2,490
-nextjs.tomicloud.com/.../main-6a4a..js 86,787
Stylesheet______________________________________1_______407
-nextjs.tomicloud.com/_nex.../style.css 407（由我的 Chrome 擴充功能頁面大小檢查器報告。）
繼續使用這個 React starter 以及我的 RESTPie3 Python REST API 伺服器來建立您的出色服務。
您也可以聯絡我詢問我是否可以從事自由工作。
如果您喜歡 Vue 而不是 React，我還使用 Vue Nuxtjs 編寫了相同的入門程式。
麻省理工學院許可證
