終於到了第三十天,算是草草的結束這次的鐵人賽...文章寫到後面水分比西瓜還多,看來了下次的鐵人賽還是要把內容都預先準備起來,如果要每天寫文章變數太大一下停電一下...
按照課程的內容,大概寫不完了,今天也整天都在外面忙所以簡單介紹一下,我目前使用的chrome 外掛 for Udemy 課程的字幕翻譯目前我只會買有英文字幕(有...
啟用 next/image C:\mylab_2023_9\ironman_2023\app\reviews[slug]\page.jsx import Ima...
影片 68 ESLintvs code 安裝 微軟出的 ESLint 外掛 npm i --save-dev eslint eslint-config-next...
前言: 所有的資料都改用CMS後端原本存放markdown文件檔的 content 資料夾可以整個刪掉 這邊要檢視 npm build 所產生的靜態網頁之前St...
前言: lib\reviews.js 裡面的 getReview getReviews 兩隻函式有很多重複的地方另外寫一隻函數來取代,重複的地方有兩個,拆成兩隻...
前言: 昨天把Review頁面完成後,接下來要做單獨的頁面API資料串接現在點選個別的遊戲頁面連結是會跳出錯誤的,今天就完成這個部分 先在測試程式裡實作 sc...
缺少圖片 重點 把圖片 顯示在網頁上 const CMD_URL = "http://localhost:1337"; const...
前言: 昨天的內容是在單獨的js檔案中,完成API的對接,從Strapi的資料庫中,撈出資料,今天的內容就是把寫在測試程式裡的程式碼拿到專案中實作。 編輯 li...
前言: 今天這篇還是在測試程式(scripts\strapi-request.mjs)裡,寫有關API對接的範例是獨立的程式,並不會動到專案裡的程式碼。 安裝套...
http://localhost:1337/api/reviews資料格式 測試api (在前端資料夾) 後端需要啟動ironman_2023\scripts\...
Headless CMS: A headless Content Management System, or headless CMS, is a back e...
今天的內容是要把進行中的專案部署到網路上Next.js 是由Vercel這家公司所開發的所以可以把Next.js專案免費部署到Vercel基本上只要先將專案gi...
app\page.jsx import Link from "next/link" import Heading from "@/...
lib\reviews.js export async function getReviews() { const slugs = await get...
app\reviews[slug]\page.jsx // 產生靜態頁面 export async function generateStaticParams(...
編輯 app\reviews\stardew-valley\page.jsx 檔案內容如下: import { readFile } from "no...
安裝所需套件 npm i -D marked npm install -D @tailwindcss/typography npm install -D gra...
編輯 app\page.jsx 檔案內容如下: import Link from "next/link" import Heading fr...
這邊用到的字型來自Google Font 挑一款自己喜歡的字型吧 編輯 app\fonts.js 檔案內如下: import { Orbitron } from...
在專案的根目錄下建立 public\images 資料夾找一些圖片放到images資料夾裡(可以直接用wiki裡面的圖片) 接著在 app\reviews\ 底...
在導入TailWind Css之後,網頁的樣式被清除了,如h1需要使用者重新定義標籤的樣式 編輯 app\page.jsx 檔案內容如下: function H...
編輯 app\layout.jsx 檔案內容如下: import Link from "next/link"; import "....
安裝所需套件: npm install --save-dev tailwindcss postcss autoprefixer npx tailwindcss...
加入Link 在Next.js 裡使用Link來取代原本的 <a> 標籤編輯 app\layout.jsx 內容如下 import Link fro...
在vs code 底下直接創建資料夾/檔案 的小技巧 操作方法:直接新增檔案 資料夾名稱/檔名.副檔名 接下來要用上面的方法在專案裡多建立幾個頁面 app/ab...
接下來在app 資料夾底下建立 reviews資料夾 底下建立 page.jsx 內容如下 function ReviewsPage() { retur...
前言: 手動建立專案流程: 在C槽(windows系統)底下建立一個資料夾作為專案名稱 如: C:\ironman_2023 在ironman_2023 底...
前言: 這次鐵人賽的內容是以我學習React+Next.js 的過程中所記錄的筆記與心得教材是在Udemy上面,隨機挑選比較新的課程且好評數量高的 購買證明:...
前言: 這次我第三次參加鐵人賽,去年因為意外而中斷連續發文(停電&沒網路)連參加獎(30天鐵人練成)都沒有...TT 簡單自我介紹一下(雖然以前的鐵人賽...