JayLin教你如何部署你的網站Next.js到Vercel，讓別人看的你的網頁

JayLinXR-avatar-img
JayLinXR
發佈於軟體開發
更新 發佈閱讀 2 分鐘

當你做好你的網站後，教大家把你的網站部署到雲端伺服器Vercel



學習重點

  • 如何使用Github Desktop
  • 如何部署到Vercel 雲端伺服器
  • Vercel 裡面設定和環境介紹
  • 如何自訂自己的網址


影片教學



注:此為Next.js 12版本，後續會推出新版本教學，別忘記記得追蹤呦


額外連結

如果對設計有興趣的朋友們可以看以下連結文章來學習Figma設計軟件

https://vocus.cc/article/645c733dfd89780001ffe890

Code 來源: https://github.com/JayLinXRs/next-por...


更多相關教學文章持續更新，請別忘記追蹤呦

JayLinXR YT: https://www.youtube.com/@jaylinxr

JayLinXR IG: https://www.instagram.com/jaylin_xr/

JayLinXR軟體開發
留言
avatar-img
JayLinXR
14會員
39內容數
設計 + 程式，是一個出版對設計和程式的學習影片和教學文章，目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
JayLinXR的其他內容
2024/05/22
使用 React Marquee 創建流暢的跑馬燈效果
React Marquee是一個輕量級的React library，可以在網頁上創建流暢的跑馬燈效果。本文提供快速教學和講解，教大家如何安裝、使用React跑馬燈library官方網站。另外，也分享了額外的資源和相關教學文章。希望透過以上講解和影片教學，能幫助大家瞭解這個library。
Thumbnail
2024/05/22
使用 React Marquee 創建流暢的跑馬燈效果
React Marquee是一個輕量級的React library，可以在網頁上創建流暢的跑馬燈效果。本文提供快速教學和講解，教大家如何安裝、使用React跑馬燈library官方網站。另外，也分享了額外的資源和相關教學文章。希望透過以上講解和影片教學，能幫助大家瞭解這個library。
Thumbnail
2024/05/03
Vite前端工具加入Tailwindcss教學
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
Thumbnail
2024/05/03
Vite前端工具加入Tailwindcss教學
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
Thumbnail
2024/04/27
使用Vite工具創建開發初始檔案的教學
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
2024/04/27
使用Vite工具創建開發初始檔案的教學
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
詹育杰的沙龍
《轉轉生 Re:INCARNATION》：Qudus Onikeku、約魯巴哲學與 Afrobeat 的去殖民身體政治
《轉轉生》（Re:INCARNATION）為奈及利亞編舞家庫德斯．奧尼奎庫與 Q 舞團創作的當代舞蹈作品，結合拉各斯街頭節奏、Afrobeat／Afrobeats、以及約魯巴宇宙觀的非線性時間，建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發，解析其去殖民的身體政治。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
詹育杰的沙龍
《轉轉生 Re:INCARNATION》：Qudus Onikeku、約魯巴哲學與 Afrobeat 的去殖民身體政治
《轉轉生》（Re:INCARNATION）為奈及利亞編舞家庫德斯．奧尼奎庫與 Q 舞團創作的當代舞蹈作品，結合拉各斯街頭節奏、Afrobeat／Afrobeats、以及約魯巴宇宙觀的非線性時間，建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發，解析其去殖民的身體政治。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
JayLinXR
JayLin教你如何部署你的網站Next.js到Vercel，讓別人看的你的網頁
當你做好你的網站後，教大家把你的網站部署到雲端伺服器Vercel
#網站#伺服器#教學
Thumbnail
avatar-avatar
JayLinXR
JayLin教你如何部署你的網站Next.js到Vercel，讓別人看的你的網頁
當你做好你的網站後，教大家把你的網站部署到雲端伺服器Vercel
#網站#伺服器#教學
Thumbnail
avatar-avatar
JayLinXR
學習React.js - 如何開發一個組件(Component)
React.js 是一個熱門的library，JayLin今天講解React核心概念以及利用一個小案例概括理論部分
#學習#程式#軟體工程師
Thumbnail
avatar-avatar
JayLinXR
學習React.js - 如何開發一個組件(Component)
React.js 是一個熱門的library，JayLin今天講解React核心概念以及利用一個小案例概括理論部分
#學習#程式#軟體工程師
Thumbnail
avatar-avatar
陳沅綦的沙龍
柏林劇團《三便士歌劇》：巴里．柯斯基的經典再造，與布萊希特劇場的當代轉向
本文分析導演巴里・柯斯基（Barrie Kosky）如何運用極簡的舞臺配置，將布萊希特（Bertolt Brecht）的「疏離效果」轉化為視覺奇觀與黑色幽默，探討《三便士歌劇》在當代劇場中的新詮釋，並藉由舞臺、燈光、服裝、音樂等多方面，分析該作如何在保留批判核心的同時，觸及觀眾的觀看位置與人性幽微。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
陳沅綦的沙龍
柏林劇團《三便士歌劇》：巴里．柯斯基的經典再造，與布萊希特劇場的當代轉向
本文分析導演巴里・柯斯基（Barrie Kosky）如何運用極簡的舞臺配置，將布萊希特（Bertolt Brecht）的「疏離效果」轉化為視覺奇觀與黑色幽默，探討《三便士歌劇》在當代劇場中的新詮釋，並藉由舞臺、燈光、服裝、音樂等多方面，分析該作如何在保留批判核心的同時，觸及觀眾的觀看位置與人性幽微。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
W. C. Chen的沙龍
【網站部屬】比較 Netlify 與 Vercel 的網站部屬方式：一步步上手教學
這篇要來談談網站部屬的方式 Netlify 提供100GB的空間給大家做使用~ 一定事先註冊登入的拉~，那我登入的方式為github。以下就是你會看的頁面。 上傳完後，就回到Netlify，選擇github，並選取剛剛建立好的專案。 接著進行部屬網站前的先置(但我自己基本是除了網站名稱，
#部屬網站#網頁#網頁管理
Thumbnail
avatar-avatar
W. C. Chen的沙龍
【網站部屬】比較 Netlify 與 Vercel 的網站部屬方式：一步步上手教學
這篇要來談談網站部屬的方式 Netlify 提供100GB的空間給大家做使用~ 一定事先註冊登入的拉~，那我登入的方式為github。以下就是你會看的頁面。 上傳完後，就回到Netlify，選擇github，並選取剛剛建立好的專案。 接著進行部屬網站前的先置(但我自己基本是除了網站名稱，
#部屬網站#網頁#網頁管理
Thumbnail
avatar-avatar
釀電影，啜一口電影的美好。
性別之外，存在面前──淺談劇作《遊林驚夢：巧遇 Hagay》
這是一場修復文化與重建精神的儀式，觀眾不需要完全看懂《遊林驚夢：巧遇Hagay》，但你能感受心與土地團聚的渴望，也不急著在此處釐清或定義什麼，但你的在場感受，就是一條線索，關於如何找著自己的路徑、自己的聲音。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
釀電影，啜一口電影的美好。
性別之外，存在面前──淺談劇作《遊林驚夢：巧遇 Hagay》
這是一場修復文化與重建精神的儀式，觀眾不需要完全看懂《遊林驚夢：巧遇Hagay》，但你能感受心與土地團聚的渴望，也不急著在此處釐清或定義什麼，但你的在場感受，就是一條線索，關於如何找著自己的路徑、自己的聲音。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
JayLinXR
全端軟體工程師 - MERN Stack完整課程教學
建置好前端後， MERN全端工程師教學在這裡 想學習MongoDB和Express可以來這裡學習
#教學#學習#工程師
Thumbnail
avatar-avatar
JayLinXR
全端軟體工程師 - MERN Stack完整課程教學
建置好前端後， MERN全端工程師教學在這裡 想學習MongoDB和Express可以來這裡學習
#教學#學習#工程師
Thumbnail
avatar-avatar
JayLinXR
學習image 圖片元件在Next.js並做一個簡單的作品集(Portfolio)
這集介紹Next Image Module模組和CSS3如何定位在Next.js Framework
#學習#教學#程式
Thumbnail
avatar-avatar
JayLinXR
學習image 圖片元件在Next.js並做一個簡單的作品集(Portfolio)
這集介紹Next Image Module模組和CSS3如何定位在Next.js Framework
#學習#教學#程式
Thumbnail
avatar-avatar
JayLinXR
安裝Google字型到Next.js 教學
當你有客製化的字型在Google Font裡面，但是又不知道如何導入到Next.js嗎? 這一集教大家如何從Google Font導入Next.js和做一個導覽列
#教學#軟體#設計
Thumbnail
avatar-avatar
JayLinXR
安裝Google字型到Next.js 教學
當你有客製化的字型在Google Font裡面，但是又不知道如何導入到Next.js嗎? 這一集教大家如何從Google Font導入Next.js和做一個導覽列
#教學#軟體#設計
Thumbnail
avatar-avatar
JayLinXR
深入了解_App檔案上設置在Next.js功能並且做一個Footer 頁腳
Next.js 架構是怎麼構成的呢?這次教學視頻和文章來帶大家了解_app.js or layout.js
#教學#文章#nextjs
Thumbnail
avatar-avatar
JayLinXR
深入了解_App檔案上設置在Next.js功能並且做一個Footer 頁腳
Next.js 架構是怎麼構成的呢?這次教學視頻和文章來帶大家了解_app.js or layout.js
#教學#文章#nextjs
Thumbnail
avatar-avatar
JayLinXR
學習如何用HMTL5和CSS3，跟JayLin一起做一個NFT卡片完整課程
介紹編譯器使用以及HTML5 | CSS 初學者學習HTML5和CSS3不知道從哪裡開始，這次Jay帶你來做個NFT卡片，一次完整教學案例來理解HTML5和CSS3
#學習#NFT#區塊鏈
Thumbnail
avatar-avatar
JayLinXR
學習如何用HMTL5和CSS3，跟JayLin一起做一個NFT卡片完整課程
介紹編譯器使用以及HTML5 | CSS 初學者學習HTML5和CSS3不知道從哪裡開始，這次Jay帶你來做個NFT卡片，一次完整教學案例來理解HTML5和CSS3
#學習#NFT#區塊鏈
Thumbnail
avatar-avatar
小P趨勢投資
算力的盡頭是電力！009819 小P量化交易者眼中的AI基建雙引擎致勝邏輯
背景：從冷門配角到市場主線，算力與電力被重新定價   小P從2008進入股市，每一個時期的投資亮點都不同，記得2009蘋果手機剛上市，當時蘋果只要在媒體上提到哪一間供應鏈，隔天股價就有驚人的表現，當時光學鏡頭非常熱門，因為手機第一次搭上鏡頭可以拍照，也造就傳統相機廠的殞落，如今手機已經全面普及，題
#AI#算力#電力
Thumbnail
avatar-avatar
小P趨勢投資
算力的盡頭是電力！009819 小P量化交易者眼中的AI基建雙引擎致勝邏輯
背景：從冷門配角到市場主線，算力與電力被重新定價   小P從2008進入股市，每一個時期的投資亮點都不同，記得2009蘋果手機剛上市，當時蘋果只要在媒體上提到哪一間供應鏈，隔天股價就有驚人的表現，當時光學鏡頭非常熱門，因為手機第一次搭上鏡頭可以拍照，也造就傳統相機廠的殞落，如今手機已經全面普及，題
#AI#算力#電力
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News