學習Next.js 做一個簡單的作品集(Portfolio)

發佈於軟體開發

2024/05/17 更新2023/05/17 發佈閱讀 1 分鐘

這集跟大家初步介紹Next.js和如何安裝與設置最後製作一個作品集(Portfolio)

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

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

學習重點

Next.js 基礎介紹
Next.js 架構
安裝Next.js
構思如何從Figma轉到Next.js

影片教學

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

總結

如何思考從Figma 轉移到Next.js
安裝與認知Next.js 特點

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

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

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

JayLinXR軟體開發

留言

JayLinXR

14會員

39內容數

設計 + 程式，是一個出版對設計和程式的學習影片和教學文章，目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr

JayLinXR的其他內容

2024/05/22

使用 React Marquee 創建流暢的跑馬燈效果

React Marquee是一個輕量級的React library，可以在網頁上創建流暢的跑馬燈效果。本文提供快速教學和講解，教大家如何安裝、使用React跑馬燈library官方網站。另外，也分享了額外的資源和相關教學文章。希望透過以上講解和影片教學，能幫助大家瞭解這個library。

2024/05/22

使用 React Marquee 創建流暢的跑馬燈效果

React Marquee是一個輕量級的React library，可以在網頁上創建流暢的跑馬燈效果。本文提供快速教學和講解，教大家如何安裝、使用React跑馬燈library官方網站。另外，也分享了額外的資源和相關教學文章。希望透過以上講解和影片教學，能幫助大家瞭解這個library。

2024/05/03

Vite前端工具加入Tailwindcss教學

本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。

2024/05/03

Vite前端工具加入Tailwindcss教學

本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。

2024/04/27

使用Vite工具創建開發初始檔案的教學

這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。

2024/04/27

使用Vite工具創建開發初始檔案的教學

這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。

你可能也想看

釀電影，啜一口電影的美好。

《傳奇：帕拉贊諾夫的十段殘篇》：以流亡書寫帕拉贊諾夫的政治寓言

賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品，以十段寓言式殘篇，重新拼貼記憶、暴力與美學，並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇：帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略，嘗試解析極權底下不可言說之事，將如何成為可被觀看的公共發聲。

#釀電影#釀評論#藝術評論

2026/01/14

釀電影，啜一口電影的美好。

《傳奇：帕拉贊諾夫的十段殘篇》：以流亡書寫帕拉贊諾夫的政治寓言

賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品，以十段寓言式殘篇，重新拼貼記憶、暴力與美學，並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇：帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略，嘗試解析極權底下不可言說之事，將如何成為可被觀看的公共發聲。

#釀電影#釀評論#藝術評論

2026/01/14

趙鐸的沙龍

柏林劇團《三便士歌劇》：善讓人嚮往，惡卻更加迷人──布萊希特的疏離與慾望

柏林劇團在 2026 北藝嚴選，再次帶來由布萊希特改編的經典劇目《三便士歌劇》（The Threepenny Opera），導演巴里・柯斯基以舞台結構與舞台調度，重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核，藉由沉浸與疏離的辯證，解析此作如何再次照見觀眾自身的位置。

#2026北藝嚴選#臺北表演藝術中心#北藝嚴選

2026/01/14

趙鐸的沙龍

柏林劇團《三便士歌劇》：善讓人嚮往，惡卻更加迷人──布萊希特的疏離與慾望

柏林劇團在 2026 北藝嚴選，再次帶來由布萊希特改編的經典劇目《三便士歌劇》（The Threepenny Opera），導演巴里・柯斯基以舞台結構與舞台調度，重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核，藉由沉浸與疏離的辯證，解析此作如何再次照見觀眾自身的位置。

#2026北藝嚴選#臺北表演藝術中心#北藝嚴選

2026/01/14

花神沒有咖啡館的沙龍

《海妲．蓋柏樂》：晃晃跨幅町直球對決經典，解構現代女性的困頓與慾望

本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲．蓋柏樂》的詮釋，從劇本歷史、聲響與舞臺設計，到演員的主體創作方法，探討此版本如何讓經典劇作在當代劇場語境下煥發新生，滿足現代觀眾的觀看慾望。

#2026北藝嚴選#北藝嚴選#臺北表演藝術中心

2026/01/14

花神沒有咖啡館的沙龍

《海妲．蓋柏樂》：晃晃跨幅町直球對決經典，解構現代女性的困頓與慾望

本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲．蓋柏樂》的詮釋，從劇本歷史、聲響與舞臺設計，到演員的主體創作方法，探討此版本如何讓經典劇作在當代劇場語境下煥發新生，滿足現代觀眾的觀看慾望。

#2026北藝嚴選#北藝嚴選#臺北表演藝術中心

2026/01/14

涵柳的沙龍

《轉轉生 Re:INCARNATION》：從身體與服裝看見奈及利亞的重生

《轉轉生》為奈及利亞編舞家庫德斯．奧尼奎庫與 Q 舞團創作的當代舞蹈作品，融合舞蹈、音樂、時尚和視覺藝術，透過身體、服裝與群舞結構，回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發，分析《轉轉生》如何以當代目光，形塑去殖民視角的奈及利亞歷史。

#2026北藝嚴選#北藝嚴選#臺北表演藝術中心

2026/01/14

涵柳的沙龍

《轉轉生 Re:INCARNATION》：從身體與服裝看見奈及利亞的重生

《轉轉生》為奈及利亞編舞家庫德斯．奧尼奎庫與 Q 舞團創作的當代舞蹈作品，融合舞蹈、音樂、時尚和視覺藝術，透過身體、服裝與群舞結構，回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發，分析《轉轉生》如何以當代目光，形塑去殖民視角的奈及利亞歷史。

#2026北藝嚴選#北藝嚴選#臺北表演藝術中心

2026/01/14

【Next.js】實作Issue Tracker Project

在過年期間，利用集中時間跟完Mosh Hamedani的Next.js課程，掌握了前端至後端的技術應用。本文分享了學習過程中的收穫與成果，以及對於未來應用的展望。

#學習#課程#應用程式

2024/02/14

【Next.js】實作Issue Tracker Project

在過年期間，利用集中時間跟完Mosh Hamedani的Next.js課程，掌握了前端至後端的技術應用。本文分享了學習過程中的收穫與成果，以及對於未來應用的展望。

#學習#課程#應用程式

2024/02/14

學習React.js - 如何開發一個組件(Component)

React.js 是一個熱門的library，JayLin今天講解React核心概念以及利用一個小案例概括理論部分

#學習#程式#軟體工程師

2023/05/18

學習React.js - 如何開發一個組件(Component)

React.js 是一個熱門的library，JayLin今天講解React核心概念以及利用一個小案例概括理論部分

#學習#程式#軟體工程師

2023/05/18

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

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

#網站#伺服器#教學

2023/05/18

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

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

#網站#伺服器#教學

2023/05/18

學習image 圖片元件在Next.js並做一個簡單的作品集(Portfolio)

這集介紹Next Image Module模組和CSS3如何定位在Next.js Framework

#學習#教學#程式

2023/05/18

學習image 圖片元件在Next.js並做一個簡單的作品集(Portfolio)

這集介紹Next Image Module模組和CSS3如何定位在Next.js Framework

#學習#教學#程式

2023/05/18

深入了解_App檔案上設置在Next.js功能並且做一個Footer 頁腳

Next.js 架構是怎麼構成的呢?這次教學視頻和文章來帶大家了解_app.js or layout.js

#教學#文章#nextjs

2023/05/18

深入了解_App檔案上設置在Next.js功能並且做一個Footer 頁腳

Next.js 架構是怎麼構成的呢?這次教學視頻和文章來帶大家了解_app.js or layout.js

#教學#文章#nextjs

2023/05/18

安裝Google字型到Next.js 教學

當你有客製化的字型在Google Font裡面，但是又不知道如何導入到Next.js嗎? 這一集教大家如何從Google Font導入Next.js和做一個導覽列

#教學#軟體#設計

2023/05/18

安裝Google字型到Next.js 教學

當你有客製化的字型在Google Font裡面，但是又不知道如何導入到Next.js嗎? 這一集教大家如何從Google Font導入Next.js和做一個導覽列

#教學#軟體#設計

2023/05/18

全端軟體工程師 - MERN Stack完整課程教學

建置好前端後， MERN全端工程師教學在這裡想學習MongoDB和Express可以來這裡學習

#教學#學習#工程師

2023/05/17

全端軟體工程師 - MERN Stack完整課程教學

建置好前端後， MERN全端工程師教學在這裡想學習MongoDB和Express可以來這裡學習

#教學#學習#工程師

2023/05/17

學習如何用HMTL5和CSS3，跟JayLin一起做一個NFT卡片完整課程

介紹編譯器使用以及HTML5 | CSS 初學者學習HTML5和CSS3不知道從哪裡開始，這次Jay帶你來做個NFT卡片，一次完整教學案例來理解HTML5和CSS3

#學習#NFT#區塊鏈

2023/05/15

學習如何用HMTL5和CSS3，跟JayLin一起做一個NFT卡片完整課程

介紹編譯器使用以及HTML5 | CSS 初學者學習HTML5和CSS3不知道從哪裡開始，這次Jay帶你來做個NFT卡片，一次完整教學案例來理解HTML5和CSS3

#學習#NFT#區塊鏈

2023/05/15

追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News