Console.log 的使用方式 在Next.js 16版，有一個新的開發技巧。 我們在Home裡面加上一個console.log，以往的經驗來說這是一個伺服器端的事件，所以在瀏覽器的Console中並不會出現這段輸出內容。 正常來說只會在伺服器端看到。 可以看到在瀏覽器一樣出現了標示Server的Console內容。 不過不用擔心，這只是在開發的時候方便觀察而已。 這個時候有趣的來了，我要來測試在Client端寫console.log會發生什麼事情，我在app底下建立components資料夾並建立一個hello.tsx檔案。 將hello的components引入到app/page.tsx。 這時候到瀏覽器觀察。會發現有兩個一樣的log。 你可能會問為什麼？我用一張圖給你看看。 在Server端會先建立好static shell，之後在Client端渲染。 React 在next.config.ts加上reactCompiler: true, 因為我對React沒有很熟悉，所以我問了一下ChatGpt。 babel-plugin-react-compiler 能做的事 Router 你會看到一個layout.tsk，可以想成是一個網站的佈局，像是header跟footer可以先放好位置，這樣每一個頁面就不必再重複渲染，然後{children}是每一個頁面的進入點，這邊舉個例子像這樣： Page是你的網站首頁的內容，一進去會先吃到app/page.tsx然後傳到layout.tsx裡面的{children}這裡。 以剛剛的例子： 觀察一下瀏覽器的 Elements，已經把app/page.tsx的內容傳到{children}並顯示。 補充：Components不能放在app/資料夾內，app是放Page的地方。 新增一個 Route 直接在app/建立一個資料夾，這邊建立一個about資料夾，跟一個page.tsx。 只要在你的網頁打/about路由就會看到Page了。這個在Next.js叫做Filebased routing system。 以下是官方文件的Route示意圖： Nested Routes 巢狀路由 我建立了一個dashboard，並在dashboard在建立兩個資料夾分別是analytics跟users。 進到 http://localhost:3000/dashboard/analytics 就可以看到 Analytics 進到 http://localhost:3000/dashboard/users 就可以看到 Users 那我們可能會有很多User，每個User都要有自己的Dashboard介面。 因此先在users底下建立一個[id]資料夾，他可以根據你傳進來的params，對應到不同Users的頁面資料。 將每個User外面包一個Link，對應到不同的使用者。將參數傳送到users/[id]。 收到了點擊Link之後傳過來的參數，並顯示使用者id。 這邊我在學的時候第一次看到{params}這種語法，其實是簡化了以下的程式碼： 補充：在 JavaScript 中，所有非同步行為（例如 fetch、資料庫、計時器）最後得到的都是 […]