技术维基

Next.js修復「模組未找到」錯誤

在進行Next.js變數的一些清理工作時，我遇到了這個奇怪的問題： Module not found: Error: Can't resolve 'net' 你可能會遇到類似的錯誤，提示缺少了一個核心的Node.js模組。請勿執行npm install net或其他類似的操作。如果你已經嘗試過，請執行npm uninstall刪除這些模組。問題的原因是：Next.js嘗試在前端運行後端代碼。在我的案例中，是由於使用了DOMPurify庫。我在組件內部使用它，但實際上我應該在getStaticProps()方法中使用它。這個方法在構建時在Node環境運行，而該庫剛好需要在該環境下運行。

Next.js應用程序捆綁

Next.js如何將你的應用程序代碼分成不同的捆綁包，以及它們包含了什麼。當你查看Next.js應用程序的頁面源碼時，你會看到一堆JavaScript文件正在被加載。讓我們首先將代碼放入一個HTML格式化器中，這樣我們人類可以更好地理解它。 <!DOCTYPE html> <html> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" /> <meta name="next-head-count" content="2" /> <link rel="preload" href="/_next/static/development/pages/index.js?ts=1572863116051" as="script" /> <link rel="preload" href="/_next/static/development/pages/_app.js?ts=1572863116051" as="script" /> <link rel="preload" href="/_next/static/runtime/webpack.js?ts=1572863116051" as="script" /> <link rel="preload" href="/_next/static/runtime/main.js?ts=1572863116051" as="script" /> </head> <body> <div id="__next"> <div> <h1>Home page</h1></div> </div> <script src="/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js?ts=1572863116051"></script> <script id="__NEXT_DATA__" type="application/json">{"dataManager":"[]","props":{"pageProps":{}},"page":"/","query":{},"buildId":"development","nextExport":true,"autoExport":true}</script> <script async="" data-next-page="/" src="/_next/static/development/pages/index.js?ts=1572863116051"></script> <script async="" data-next-page="/_app" src="/_next/static/development/pages/_app.js?ts=1572863116051"></script> <script src="/_next/static/runtime/webpack.js?ts=1572863116051" async=""></script> <script src="/_next/static/runtime/main.js?ts=1572863116051" async=""></script> </body> </html> 我們有4個JavaScript文件被聲明在head中進行預加載，使用rel="preload" as="script"： /_next/static/development/pages/index.js（96行代碼） /_next/static/development/pages/_app....

nextjs-deploy-on-now

＃在 Now 上部署 Next.js 應用程式如何使用 Now 輕鬆無縫地部署您的 Next.js 應用程式 Zeit 現在稱為 Vercel，本教程可能已經過時我們如何將 Next.js 應用程式部署到真實的網頁伺服器，以便其他人可以訪問它？部署 Next 應用程式的最簡單方法之一是通過由 Zeit（創建了開源專案 Next.js 的同一家公司）創建的 Now 平台。您可以使用 Now 部署 Node.js 應用程式、靜態網站等等。 Now 使應用程式的部署和分發步驟非常簡單快速，除了 Node.js 應用程式之外，它們還支持 Go、PHP、Python 等語言的部署。您可以將其視為“雲端”，因為您實際上不知道您的應用程式將在哪裡部署，但您知道您將擁有可訪問該應用程式的 URL。 Now 免費開始使用，目前包括 100GB 的託管空間、每天 1000 次無伺服器函數調用、每月 1000 個部署、每月 100GB 的頻寬和一個 CDN 位置。如果您需要更多，價格頁面將幫助您瞭解相關成本。安裝開始使用 Now 的最佳方法是使用官方的 Now CLI： npm install -g now 一旦命令可用，運行 now login 然後應用將要求您輸入電子郵件。如果您尚未註冊，請在繼續之前在 https://zeit.co/signup 上創建帳戶，然後將您的電子郵件添加到 CLI 客戶端中。...

nextjs-email-authentication

＃使用NextAuth的Next.js電子郵件身份驗證在Next.js中管理身份驗證可以有很多不同的方法。在我的網站上，我選擇使用基於電子郵件的身份驗證和JWT令牌，通過NextAuth.js來實現，下面是我是如何做到的。首先，你需要一個外部數據庫。你可以使用本地數據庫或者雲端數據庫。我選擇了PostgreSQL，但你可以使用任何你想要的數據庫。假設你已經建立了一個Next.js網站。執行npm install next-auth pg安裝NextAuth和PostgreSQL庫。然後在你的.env文件中添加以下內容： DATABASE_URL=<輸入postgresql://數據庫的URL> EMAIL_SERVER=smtp://user:[[email protected]](/cdn-cgi/l/email-protection):465 EMAIL_FROM=你的名字 <[[email protected]](/cdn-cgi/l/email-protection)> NEXTAUTH_URL=http://localhost:3000 SECRET=密鑰確保你添加了一個密鑰。你可以使用https://generate-secret.vercel.app/32生成。我使用https://mailtrap.io來測試郵件，這在你設置好一切時非常方便。創建一個具有以下內容的pages/api/auth/[...nextauth].js文件： import NextAuth from 'next-auth' import Providers from 'next-auth/providers' export default NextAuth({ providers: [ Providers.Email({ server: process.env.EMAIL_SERVER, from: process.env.EMAIL_FROM, }), ], database: process.env.DATABASE_URL, secret: process.env.SECRET, session: { jwt: true, maxAge: 30 * 24 * 60 * 60, // 30 days }, jwt: { secret: 'INp8IvdIyeMcoGAgFGoA61DdBglwwSqnXJZkgz8PSnX', //在這裡使用一個隨機密鑰令牌 encryption: true, }, debug: true, }) 現在根據你的數據存取層進行配置。如果你使用Prisma ORM，可以使用以下命令安裝@next-auth/prisma-adapter：...

nextjs-fix-constructor-requires-new-operator

Next.js中如何修复“Constructor requires ’new’ operator”错误在使用Next.js过程中，我遇到了以下错误： TypeError: Constructor requires 'new' operator 原来是我使用了next/image提供的<Image />组件，但我忘记在顶部导入它： import Image from 'next/image' 如果你在组件之间移动JSX，可能会很棘手。

nextjs-router

＃如何使用Next.js路由器学习如何使用next/router包来控制Next.js中的路由在使用Link连接两个页面的Next.js上，我们看到了如何使用Link组件在Next.js应用中声明式地处理路由。在JSX中管理路由非常方便，但有时您需要以编程方式触发路由更改。在这种情况下，您可以直接访问Next.js的路由器，它位于next/router包中，并调用其push()方法。下面是访问路由器的示例： import { useRouter } from 'next/router' export default () => { const router = useRouter() //... } 通过调用useRouter()来获取路由器对象之后，我们可以使用它的方法。这是客户端路由器，因此方法应仅在前端代码中使用。最简单的方法是将调用包装在useEffect() React钩子中，或者在React有状态组件中的componendDidMount()内部。您最常使用的是push()和prefetch()。 push()允许我们以编程方式触发URL更改，如前端代码所示： router.push('/login') prefetch()允许我们以编程方式预取URL，在没有自动处理预取的Link标签时非常有用，如下所示： router.prefetch('/login') 完整示例： import { useRouter } from 'next/router' export default () => { const router = useRouter() useEffect(() => { router.prefetch('/login') }) } 您还可以使用路由器来监听路由变更事件。

Node fs 模塊

Node.js 的 fs 模塊提供了與文件系統進行交互的功能。無需安裝，作為 Node 核心的一部分，可以通過 require 來使用： const fs = require('fs') 一旦這樣做了，你就可以訪問它的所有方法，包括： fs.access()：檢查文件是否存在，以及 Node 是否可以使用權限訪問該文件。 fs.appendFile()：將數據追加到文件中。如果文件不存在，則會創建新的文件。 fs.chmod()：更改指定文件的許可權。相關方法有：fs.lchmod()，fs.fchmod() fs.chown()：更改指定文件的所有者和群組。相關方法有：fs.fchown()，fs.lchown() fs.close()：關閉文件描述符 fs.copyFile()：複製文件 fs.createReadStream()：創建可讀的文件流 fs.createWriteStream()：創建可寫的文件流 fs.link()：在文件中創建一個新的硬連接 fs.mkdir()：創建一個新的文件夾 fs.mkdtemp()：創建一個臨時目錄 fs.open()：設置文件模式 fs.readdir()：讀取目錄的內容 fs.readFile()：讀取文件的內容。相關方法有：fs.read() fs.readlink()：讀取符號鏈接的值 fs.realpath()：將相對文件路徑指針解析為完整路徑（.，..） fs.rename() ：重命名文件或文件夾 fs.rmdir()：刪除文件夾 fs.stat()：返回文件的狀態。相關方法有：fs.fstat()，fs.lstat() fs.symlink()：創建新的符號鏈接 fs.truncate()：將指定文件截斷到指定長度。相關方法有：fs.ftruncate() fs.unlink()：刪除文件或符號鏈接 fs.unwatchFile()：停止監聽文件的變化 fs.utimes()：更改文件的時間戳記。相關方法有：fs.futimes() fs.watchFile()：開始監聽文件的變化。相關方法有：fs.watch() fs.writeFile()：將數據寫入文件。相關方法有：fs.write() 關於 fs 模塊的一個特點是，所有的方法默認都是異步的，但是也可以同步地進行操作，只需在方法名後面添加 Sync。例如： fs.rename() fs.renameSync() fs.write() fs.writeSync() 這對應用程序的流程有很大的影響。 Node 10 包括對基於 promise 的 API 的實驗性支援。舉個例子，讓我們來看看 fs.rename() 方法。使用回調函數來使用異步 API： const fs = require('fs') fs.rename('before.json', 'after.json', (err) => { if (err) { return console....

Node HTTP 模組

Node.js 的 http 模組提供了有用的函式和類別來建構 HTTP 伺服器。 HTTP 核心模組是 Node 網路通訊的重要模組。屬性 http.METHODS http.STATUS_CODES http.globalAgent 方法 http.createServer() http.request() http.get() 類別 http.Agent http.ClientRequest http.Server http.ServerResponse http.IncomingMessage 你可以透過以下方式引入此模組： const http = require('http'); 這個模組提供了一些屬性、方法和類別。屬性 http.METHODS 這個屬性列出了所有支援的 HTTP 方法： > require('http').METHODS [ 'ACL', 'BIND', 'CHECKOUT', 'CONNECT', 'COPY', 'DELETE', 'GET', 'HEAD', 'LINK', 'LOCK', 'M-SEARCH', 'MERGE', 'MKACTIVITY', 'MKCALENDAR', 'MKCOL', 'MOVE', 'NOTIFY', 'OPTIONS', 'PATCH', 'POST', 'PROPFIND', 'PROPPATCH', 'PURGE', 'PUT', 'REBIND', 'REPORT', 'SEARCH', 'SUBSCRIBE', 'TRACE', 'UNBIND', 'UNLINK', 'UNLOCK', 'UNSUBSCRIBE' ] http....

Node os模組

Node.js的os模組提供了與底層系統進行交互的有用函數。此模組提供了許多函數，可以用來從底層操作系統和運行程式的計算機中檢索信息並與之交互。 const os = require('os') 有一些有用的屬性可以告訴我們一些與文件處理相關的重要信息： os.EOL返回行分隔符序列。在Linux和macOS上是\n，在Windows上是\r\n。當我說Linux和macOS時，指的是POSIX平台。為了簡單起見，我排除了其他不太流行的Node可運行的操作系統。 os.constants.signals提供了與處理進程信號相關的所有常量，例如SIGHUP、SIGKILL等。 os.constants.errno設置了錯誤報告的常量，例如EADDRINUSE、EOVERFLOW等。您可以在https://nodejs.org/api/os.html#os_signal_constants上找到它們的所有信息。現在讓我們來看一下os提供的主要方法： os.arch() os.cpus() os.endianness() os.freemem() os.homedir() os.hostname() os.loadavg() os.networkInterfaces() os.platform() os.release() os.tmpdir() os.totalmem() os.type() os.uptime() os.userInfo() os.arch() 返回標識底層架構的字符串，例如arm、x64、arm64。 os.cpus() 返回系統上可用CPU的信息。示例： [ { model: 'Intel(R) Core(TM)2 Duo CPU P8600 @ 2.40GHz', speed: 2400, times: { user: 281685380, nice: 0, sys: 187986530, idle: 685833750, irq: 0 } }, { model: 'Intel(R) Core(TM)2 Duo CPU P8600 @ 2.40GHz', speed: 2400, times: { user: 282348700, nice: 0, sys: 161800480, idle: 703509470, irq: 0 } } ] os....

Node 檔案統計

如何使用 Node 獲取檔案的詳細資訊每個檔案都有一組我們可以使用 Node 檢視的詳細資訊。特別是使用 fs 模組提供的 stat() 方法。您可以呼叫它並傳遞檔案路徑，一旦 Node 獲取了檔案詳細資訊，它將調用您傳遞的回調函數，該函數帶有2個參數：錯誤訊息和檔案統計資訊： const fs = require('fs') fs.stat('/Users/flavio/test.txt', (err, stats) => { if (err) { console.error(err) return } //我們可以在 `stats` 中存取檔案統計資訊 }) Node還提供了一個同步方法，它會阻塞線程，直到檔案統計資訊準備好： const fs = require('fs') try { const stats = fs.statSync('/Users/flavio/test.txt') } catch (err) { console.error(err) } 檔案資訊存儲在 stats 變數中。我們可以使用 stats 提取哪些類型的資訊？有很多，包括：使用 stats.isFile() 和 stats.isDirectory() 判斷檔案是目錄還是檔案使用 stats.isSymbolicLink() 判斷檔案是否為符號連結使用 stats.size 獲取檔案大小（以位元組為單位）還有其他高級方法，但在日常編程中，您將主要使用上述方法。 const fs = require('fs') fs....