前言

嗨，大家好！我是 Jade，這是我第一次參加 iTHome 鐵人賽～ 好緊張ＸＤ
猶豫了很久之後，決定挑戰自己在這 30 天製作最近很紅的 no-code (無程式碼) 網頁！

主題

這次想挑戰的並不是使用 no-code 平台實作一個網頁出來，而是自己手刻製作無程式碼的個人網頁。什麼意思呢？意思是我會用 Next.js 實作一個網頁，在這過程中也會跟大家分享 Next.js 的一些相關知識。網頁做完之後，可以開始串接 API 而目前想到的是可以串 Github 和 Notion API，希望也能順利接 Instagram 和 Youtube 的 API～ 最後就把整個網頁部署推到 production 喔！給全世界的人看（？

那 no-code 的點在哪呢？這網頁不需要更新或編輯，都會自動拿到最新資料 (自動化的概念？)，而且做完之後大家都可以拿來用做自己的個人網頁！所以 no-code 是未來(開發完)的事，也是對其他人來說應該是 no-code 沒錯 ＸＤ

目標

講一下我對自己的目標，也是這系列文的目標。我希望在第 30 天：

• 我能看到一個好看的個人網頁而且是完全自動化的，
  • 也可以給別人拿來用做出自己喜歡的網頁！
  • 代表這網頁也要有一定程度的客製化功能ＸＤ
• 真的有 30 篇文章哈哈哈
  • 而且都有寫到一開始預定的主題，
  • 也希望看到文章的大家都能有所收穫～

當然也希望自己對所用到的技術有更深的了解與掌握。不過，本人也沒串過 Github, Notion, Instagram, Youtube API，所以我也希望都可以順利接起來。如果有其他個人網頁相關的 API 也可以跟我說，我可以串串看！

規劃

來吧！跟大家分享這系列文的主題規劃：

• Next.js
  • 介紹
  • Setup
  • SSR - CSR - ISR - SSG
  • Data Fetching
  • Static File Serving
  • Image, Font, Script Optimization
  • Fast Refresh
  • ESLint
  • Environment Variables (.env)
  • TypeScript & Path Aliases
  • Polyfills
  • Routing
  • API Routes
  • Dynamic Import
• 部署 Deployment
  • Vercel
  • Node.js Server & Static HTML Export
  • Netlify
• SWR
• 第三方 (3rd Party) API
  • Github
  • Notion
  • Instagram
  • Youtube
  • 考慮中：Twitter, RSS
• Open Graph 與連結封面縮圖
• Chakra UI: React UI Component Library
  • 介紹 & Setup
  • 客製化 Theme & Component Style
  • Hooks
• Google Analytics

這不是文章的順序而是預計涵蓋的範圍～

小結

寫完系列文的文章規劃之後才發現超多的ＸＤ
看起來連假會很忙啊哈哈
希望沒有跟著開發的人可以用我(之後)做出來的網頁，做自己的個人網頁～

歡迎看看我的無程式碼之旅！ <3