@next.js

Stories List
@ruyadehuangdou

基於Next.js與多AI模型的小紅書智能創作系統

小紅書AI創作系統 項目概述 小紅書AI創作系統是一個面向小紅書創作者的綜合工具平台,提供多種實用工具和功能來提升創作效率。本項目使用最新的 Next.js 15 和 React 19,結合多個 AI 模型,為創作者提供智能化的創作輔助服務。 一、技術棧 Next.js 15.1.4 (使用 App Router) React 19 Tailwind CSS 3.4.17 TypeScr

ruyadehuangdou Avatar

@ruyadehuangdou

Nickname 深漂程序員悟飯

@immerse

Next.js 中為什麼 App Router 可能是未來,但 Pages Router 仍然重要?

Next.js 作為一個強大的 React 框架,為開發者提供了兩種路由系統:App Router 和 Pages Router。這兩種路由系統各有特色,適用於不同的場景。本文將深入探討這兩種路由系統的區別、優缺點和使用場景,幫助你做出最佳選擇。 App Router:新一代的路由革命 App Router 是 Next.js 13 引入的新路由系統,它使用 app 目錄來組織路由,帶來了許多令人

immerse Avatar

@immerse

Nickname 沉浸式趣談

@infinilabs

如何實現一個充滿科技感的官網(二)

背景 在上一篇文章 《如何實現一個充滿科技感的官網(一)》 中,我們初步瞭解了該官網的整體設計,並與大家探討了它的視覺呈現和用户體驗。 我們前期的內部設計偏向簡潔,所以開始思考如何提升網站的整體設計感。這些嘗試便由此展開。 網站地址:https://infinilabs.com/ 如果你對動態背景的實現感興趣,這篇文章將帶你深入探索,揭秘如何從零打造一個兼具美感與功能性的企業官網! 技術選型

infinilabs Avatar

@infinilabs

Nickname 極限實驗室

@coder_64d08a0a77d68

我第一個快200 Star 的項目,Taro H5 SSR 插件現在咋樣了

引言 我寫下這篇文章的初衷是,我認識到,編寫代碼的同時,我們也需要去分享我們的工作和成果,讓更多的人瞭解我們所做的事。這篇文章旨在記錄我的第一個近200 Star 的項目 tarojs-plugin-ssr,能讓更多的人去知道這個項目,瞭解到這個項目還被持續維護中。 我將在文章中講講這個項目的起源,回顧我與 Taro 項目的故事。同時,根據我有限的經驗,來回答一些朋友們關於如何參與開源項目的疑問。

coder_64d08a0a77d68 Avatar

@coder_64d08a0a77d68

Nickname Coder

@kanshouji

服務端渲染nextjs項目接入經驗總結

服務端渲染 nextjs@14 項目接入經驗總結,本文重點介紹基本知識點/常用的知識點/關鍵知識點 背景 為提高首屏渲染速度減少白屏時間提高用户體驗及豐富技術面,開始調研和接入nextjs框架 優勢 nextjs是一套成熟的同構框架(一套代碼能運行在服務端也能運行在瀏覽器)對比傳統的客户端渲染的核心優勢是首屏是帶數據的和減少跨域帶來的option請求。其它後續操作是一樣的。理論上能比客户端渲染看到

kanshouji Avatar

@kanshouji

Nickname 路邊縣

@zzd41

Next.js 超實用進階技巧【持續更新】

hello 大家好,我是 superZidan,這篇文章想跟大家聊聊Next.js 進階技巧,如果大家遇到任何問題,歡迎 聯繫我或者直接微信添加superZidan41 🔥🔥🔥前方高能,乾貨滿滿,建議點贊➕關注➕收藏;後續還會 持續更新更多技巧和案例 温馨提示:如果你還是個 Next.js 新手,建議先閲讀這篇 Next.js 最佳實踐,照着這篇文章先把代碼敲一遍 Next.js 是一個強

zzd41 Avatar

@zzd41

Nickname superZidan

@zzd41

深入探索 Next.js 中的流式渲染和分塊傳輸編碼

hello 大家好,我是 superZidan,這篇文章想跟大家聊聊 Next.js 中的流式渲染和分塊傳輸機制 ,如果大家遇到任何問題,歡迎 聯繫我或者直接微信添加superZidan41 🔥🔥🔥前方高能,乾貨滿滿,建議點贊➕關注➕收藏; 温馨提示:如果你還是個 Next.js 新手,建議先閲讀這篇 Next.js 最佳實踐,照着這篇文章先把代碼敲一遍 簡述 在本篇文章中,我們將深入探索組

zzd41 Avatar

@zzd41

Nickname superZidan

@cshopping

一、nextjs如何使項目工程化(c-shopping電商開源)

歡迎來到本系列文章,這些內容都是從我的開源項目 C-Shopping 衍生而來的。在這個系列中,我們將深入探討 Next.js 和其他技術的各個方面,分享我在開發 C-Shopping 時積累的見解和最佳實踐。如果你發現這些文章有幫助,請考慮在 GitHub 上為項目點亮一顆星星。你的支持對我來説意義重大,也會激勵我進行更多的開發! 項目在線演示地址: docker 部署地址:http://s

cshopping Avatar

@cshopping

Nickname 繼小鵬

@ntksol

前端鏟💩日記 #2:易被忽略的「domain」

若看了上篇筆記,眼尖的鐵汁們應該發現,最終的重構成果並未出現目錄結構調整方案提到的 domain 文件夾。 這是因為領域建模是個相對較難且需要長期去做的事情,所以我們不急,慢慢來,要用心地思考與處理——從本篇筆記開始就會涉及到相關內容啦! 在進行實際的鏟💩演練之前,這篇筆記先來講解下 domain 文件夾的重要性,請各位鐵汁搬來小板凳坐坐好,用小拇指清理下👂🏼聽我説—— 在我所設計的「模塊化

ntksol Avatar

@ntksol

Nickname 歐雷

@ntksol

前端鏟💩日記 #3:重構「個人主頁」

鐵汁們聽好了哈——從本篇筆記開始,將進入實際的鏟💩演練啦! 這首先要被剷除的💩,是分佈在我接手官網項目後最先接觸的用户個人主頁裏。 在這系統中,用户分個人與項目方兩種,它們的個人主頁雖看起來一樣,但視覺細節和數據結構等還是有些差異的,佈局結構大致如圖所示: 個人主頁原先代碼中,其他部分還算有點封裝意識,但最重要的課程、活動等列表部分的代碼看起來就是初級水平,將它們全部糅合在一個 React

ntksol Avatar

@ntksol

Nickname 歐雷

@ntksol

前端鏟💩日記 #1:項目目錄結構調整

最近哥們兒我接手了一個官網的前端項目,雖説是官網,但它是個 Web 應用而非營銷網站,所以還是有一定複雜度在的。 這幾天是邊往死裏摁🐞邊熟悉代碼邏輯,沒想到這是個燙手🍠,前人留了一堆坑給我——令我覺得他撐死了也就中級水平,不能再高了……🙁☹️🙂‍↔️ 是不以為我看到這💩山會苦惱不堪,心中如那呼倫貝爾大草原般萬🐎奔騰? 不!你想錯了!!我興奮得很呢!!! 別誤會,別誤會!我不是那個什麼「

ntksol Avatar

@ntksol

Nickname 歐雷

@cshopping

C-Shopping基於Next.js,開源電商平台全新亮相

嗨,大家好!歡迎來到C-Shopping,這是一場揭開科技面紗的電商之旅。我是C-Shopping開源作者“繼小鵬”,今天將為你介紹一款基於最新技術的開源電商平台。讓我們一同探索吧! 在線體驗:http://shop.huanghanlian.com/ 項目傳送門:https://github.com/huanghanzhilian/c-shopping 如果你覺得有幫助,請給我一個Star,這

cshopping Avatar

@cshopping

Nickname 繼小鵬

@awbeci

Next.js 14集成next-auth(v5)和redux-toolkit最佳實踐

前言 自從next.js14發佈之後,app router變成了官網主推的架構區別於pages router的傳統架構,app router更適合最新的react,於是自己動手把next-auth、redux-toolkit、ant-design、tailwindcss也一同集成進來,分享給大家,如果有錯誤之處歡迎大家指正。 操作 1、創建項目 使用下面命令創建項目,並且選擇tailwind cs

awbeci Avatar

@awbeci

Nickname Awbeci

@8848_62c77d4bb2532

滴滴開源!一套輕量安全的問卷調研系統!

大家好,我是 Java陳序員。 之前給大家介紹了兩款開源的問卷調查系統。 太捲了!這個考試系統不愧是“卷王”! 填鴨表單!開箱即用的開源問卷調查系統! 今天,再給大家安利一套輕量安全的問卷調研系統,由滴滴開源! 關注微信公眾號:【Java陳序員】,獲取開源項目分享、AI副業分享、超200本經典計算機電子書籍等。 項目介紹 xiaoju-survey —— 一套滴滴開源、輕量安全的問卷調研系統

8848_62c77d4bb2532 Avatar

@8848_62c77d4bb2532

Nickname Java陳序員

@infinilabs

如何實現一個充滿科技感的官網(一)

背景 前段時間完成一個公司官網項目,個人第一感覺是整體風格簡潔但充滿科技感。所以想着抽時間寫篇文章出來分享一下(其實想着拿出來炫一下,得瑟一下,滿足一下自身虛榮心,請大家包容一下我的虛榮心,莫噴。) 抽空寫下這篇文章,既是分享,也希望能夠聽到更多反饋。 官網地址是:https://infinilabs.com/, 大家可以先去看看。對了,也歡迎直接在評論區告訴我:“這樣的官網設計,你覺得怎麼樣?”

infinilabs Avatar

@infinilabs

Nickname 極限實驗室

@changlina

React 調試不求人:VS Code 與 Chrome 的終極指南

大家好,我是長林啊!一個 Go、Rust 愛好者,同時也是一名全棧開發者;致力於終生學習和技術分享。 本文首發於微信公眾號《全棧修煉之旅》,歡迎大家關注! 在開發過程中,調試無疑是我們解決疑難雜症的手段之一,但調試不僅僅是在解決 Bug 的時候才能應用的技能,當拿到一個新的項目時,我們也可以通過調試的方法,去快速瞭解代碼、熟悉業務。 本文工具及代碼環境: Visual Studio

changlina Avatar

@changlina

Nickname 長林啊

@ailvyoudetiebanshao

2025最好的Next.js面試題(一)

2025最好的Next.js面試題(一) 最近在面試,就寫一些關於問到的面試題,同時也過一下知識點。 基礎概念 什麼是Next.js?它與React的關係是什麼? Next.js是一個基於React的全棧開發框架,由Vercel開發和維護。它在React的基礎上提供了額外的功能和優化,如服務器組件(Server Components)、流式渲染(Streaming)、服務器操作(Server Ac

ailvyoudetiebanshao Avatar

@ailvyoudetiebanshao

Nickname 溪抱魚

@ailvyoudetiebanshao

Next.js 面試深入剖析緩存機制

決勝 Next.js 面試:深入剖析緩存機制 1. 引言:為何 Next.js 中的緩存如此重要? Next.js 通過其精密的緩存系統,極大地提升了應用程序的性能、降低了服務器負載,並通過提供預先計算的結果或數據來最小化運營成本。 對於任何期望構建優化應用的開發者而言,深入理解這些緩存層是至關重要的。 在技術面試中,對 Next.js 緩存機制的掌握程度,往往能體現出開發者對 Nex

ailvyoudetiebanshao Avatar

@ailvyoudetiebanshao

Nickname 溪抱魚

@awbeci

Next.js-Cookie鑑權+續期+退出登錄

前言 之前寫過關於next.js鑑權操作cookie的文章,Next.js-cookie鑑權+續期1和Next.js-cookie鑑權+續期2,最近chatgpt非常火,於是我問它next.js鑑權最佳實踐,下面是它的回答: 設置合理的 cookie 有效期:合理的 cookie 有效期應該根據網站的特點來確定,通常建議將其設置為一定時間內(如 30 分鐘)。 定時刷新 cookie

awbeci Avatar

@awbeci

Nickname Awbeci

@cshopping

二、nextjs API路由如何做好JWT登錄鑑權、身份鑑權,joi字段校驗,全局處理異常等(c-shopping電商開源)

介紹 在這篇文章中,我們將學習如何在C-Shopping電商開源項目中,基於Next.js 14,處理所有API路由中添加身份驗證和錯誤處理中間件的思路與實現。 這篇文章中的代碼片段取自我最近開源項目C-Shopping,完整的項目和文檔可在https://github.com/huanghanzhilian/c-shopping地址查看。 Next.js中的API路由 在Next.js14中,/

cshopping Avatar

@cshopping

Nickname 繼小鵬

@pengxiaohei

Next14 app +Trpc 部署到 Vercel

本文使用了 MongoDB, 還沒有集成的可以看一下上篇文章 Next14 app +Vercel 集成 MongoDB next13 可以參考 trpc 文檔 而且谷歌上已經有不少問題解答,但是目前 next14 app 只看到一個項目中有用到 Github 倉庫,目前這個倉庫中服務端的上下文獲取存在問題,目前找到一個有用的可以看 Issus。目前 trpc 對 next14 app

pengxiaohei Avatar

@pengxiaohei

Nickname 彭小黑