Juxt
JUXT Design
Index · Tags

nextjs

4 items tagged with nextjs.

Blog Posts(4)

  • ArticleFebruary 8, 2024

    Migrating from Gatsby to Next.js 14

    This website has entered v3 of its iteration! v2 was created using Gatsby and integrated with my previous design resources `dojo.today`. Entering v3, I'm migrating the website from Gatsby to Next.js 14! Things that I'm considering during the revamp: For me there are two key pillar of content that require to migrate from this website 1. Blog articles on juxtdesign.cc that previously saved as Markd

    NextjsGatsbyWebsite
  • ArticleFebruary 25, 2024

    PrevNext Blog Component for NextJS Using ContentLayer

    Using ContentLayer, it's easy to create a Prev & Next component if you want to encourage users to read one blog article and then the order. All it takes are two simple step. 1. Create related posts logic on blog single page You should already have blog single page setup in the file like `/blog/[slug].tsx`. In addition to it you will need to create an index of posts, assuming you want to build a ch

    Nextjs
  • ArticleAugust 26, 2024

    NextJS Modal with shadcn for Intercepting and Parallel Routes

    Intercepting Routes was a new feature firstly released in NextJS 13. Currently NextJS file-based route system is like a sitemap, there are no specific order on how the route is read or triggered. In NextJS documentation, it also wrote: Note that the `(..)` convention is based on _route segments_, not the file-system. Intercepting route thinks differently by thinking how would a user enters a route

    Nextjs
  • ArticleJune 15, 2026

    用 Agentation 把 UI 註解直接餵給 AI agent

    跟 AI coding agent 說「這個按鈕往左一點」、「這裡間距怪怪的」,最後往往變成一大段文字描述,模型還是抓錯元素。這篇主要想分享給:平常用 Cursor、Claude Code 改前端,但又懶得截圖標箭頭的人。 Agentation 的做法很直接——在瀏覽器裡點元素、留註解,輸出結構化 context 給 agent 讀。我最近在這個站的 Next.js 專案裝好了,從 React component 到 Cursor MCP 都走過一遍,紀錄如下。 ⸻ ▍Agentation 是什麼? dev-only 的 React overlay。開發模式下你可以: - 點頁面上任何元素 - 寫要改什麼 - 複製 markdown,或同步到本機 MCP server 預設資料不會離開你的電腦。註解先留在瀏覽器,除非你手動複製,或接上 `localhost`。對設計師跟前端來說,跟 Cur

    AiCursorNextjs