Next.js 實作 Blog 功能
前言
這篇是參考 鐵人賽 系列文章 「從零開始打造炫砲個人部落格」系列簡介 - Modern Next.js Blog 系列 實作的紀錄，實際操作上有遇到很多問題，但大致上跟著git修改的部分調整都可以修改成功。
這篇的解說很清楚，彙整的也很完整，推薦跟著教學文章操作。
使用的前端技術
| 功能 | Next.js 工具 |
|---|---|
| UI 樣式 | Tailwind CSS |
| 多語系 | next-i18next |
| SEO meta tags | next-seo |
| 指令面板 | kbar |
| 留言系統 | giscus |
| 換頁進度條 | nprogress |
| 更扎實的 JavaScript | TypeScript |
| 統一程式碼格式 | ESLint, Prettier |
| Markdown/MDX 文章處理 | Contentlayer |
| 網站託管 | Vercel |
Next.js：現代全端框架
Vercel：網站託管
Contentlayer：Markdown/MDX 文章處理
參考文章: https://ithelp.ithome.com.tw/articles/10291960
官方文件
https://nextjs.tw/learn/foundations/about-nextjs/what-is-nextjs
環境設定
建立專案
1 | pnpm create next-app --typescript |
啟動 Next.js 專案
1 | pnpm dev |
本部落格所有文章除特別聲明外，均採用CC BY-NC-SA 4.0 授權協議。轉載請註明來源 Nalson！
相關推薦
2024-11-15
使用 Docker-Compose 部署 Next.js 應用程式
將 Next.js 應用程式容器化是一種高效的開發方式，因為它提供了更具隔離性和可重現的環境。在部屬的時候可以省下一些重複的工作。在本篇文章中，我將介紹如何使用 Docker 和 Docker-Compose 快速建立與執行 Next.js 應用程式。讓我們一步步實作，從建立專案到成功啟動。 1. 建立 Next.js 專案首先，我們需要建立一個 Next.js 應用程式。執行以下指令： 1npx create-next-app docker-next 執行完畢後，將會建立一個名為 docker-next 的資料夾。 進入該資料夾： 1cd docker-next 2. 建立 Dockerfile在 docker-next 資料夾中，新增一個名為 Dockerfile 的檔案，並填入以下內容： 1234567891011FROM node:20WORKDIR /appCOPY package.json ./RUN npm installCOPY . .CMD ["npm", "run",...
2024-12-12
Auth.js 功能介紹與安裝流程
日常工作上有遇到一個需求: 開發登入驗證功能，這邊在討論的時候發現到需求是要可以SSO登入多個平台，加上目前公司主要前端使用的是Next.js ，所以我在網路上找到了 Auth.js 這個工具。 https://authjs.dev/ 接下來我們點擊 Getting Started 開始進入Auth.js 的Introduction 介紹頁面 什麼是 Auth.js？Auth.js 是一個與執行環境無關的函式庫(runtime agnostic library)，基於標準的 Web API 開發，與多種現代 JavaScript 框架深度整合。 提供的身份驗證體驗具有以下特點： 簡單開始：對於初學者來說，設置和使用非常直觀。 易於擴展：可根據需求自定義和擴充功能。 隱私與安全：高度注重用戶數據的隱私和安全性。 https://authjs.dev/getting-started 目前可以看到 Auth.js 支援多個前端框架像是Next.js、Qwik、SvelteKit、Express，我目前主要是以Next.js...
評論
ValineDisqus
