Netlify Lambda 函數教程

如何使用 Netlify Lambda 函数，为 JAMstack 网站添加动态处理功能 之前我在我的Netlify教程中写到了Netlify。我使用它来托管这个博客，而且效果非常好。 我还使用它来运行其他网站，而且所有的网站都是基于 Hugo 构建的 - 这使得我的堆栈100%基于JAMstack。 JAM 的有趣之处在于它不仅仅局限于静态和"哑"网站 - 你可以实现任何你想要的动态功能。 其中大部分的功能由“lambda 函数”实现。 你可以让你的网站上的 JavaScript (或纯 HTML 表单) 调用 URL 接口，当调用时执行一些预先确定的代码。不同的供应商支持不同的编程语言。Netlify 目前支持 Node.js 和 Go。 在本教程中，我们将专注于使用 Node.js 编写的 lambda 函数。 Netlify 给我们提供了一个慷慨的免费使用限额，每个月最多可以调用 125,000 次函数，并且总计运行时间为 100 小时。函数提供了 128MB 的内存，每个函数可以执行最长 10 秒。对于一般需要，这已经足够了。 在内部，Netlify 在 AWS Lambda 上运行该函数，并为你抽象了 AWS 的所有复杂性。 我们如何创建函数呢？我们将一个 JavaScript 文件上传到站点的 functions 文件夹中。 在该文件中，我们必须遵循一个名为 handler 的方法： exports.handler = (event, context, callback) => { //功能实现 } 如果您对 AWS Lambda 比较熟悉，这段代码会让您感到亲切。如果您从未使用过它，不用担心 - 这里是我们 handler 接收到的参数的简要概述：...

Next.js vs Gatsby vs create-react-app

Next.js或Gatsby？為什麼要選擇它們而不是create-react-app？而你又應該選擇哪一個呢？ create-react-app無法輕鬆地幫助您生成伺服器端渲染的應用程式。它所提供的一切（包括SEO、速度等等），只能由像Next.js和Gatsby這樣的工具提供。 Next.js比Gatsby更適合的時機是什麼？ 它們都可以幫助實現伺服器端渲染，但方式不同。 使用Gatsby的結果是一個靜態網站生成器，沒有伺服器。您可以構建網站，然後將構建過程的結果靜態地部署在Netlify或其他靜態主機網站上。 Next.js提供了一個後端，可以根據請求生成伺服器端渲染的響應，讓您可以創建動態網站，這意味著您將在可以執行Node.js的平台上部署它。 Next.js也可以生成靜態網站，但我不認為這是它的主要用例。 如果我的目標是構建一個靜態網站，我可能很難選擇，也許Gatsby擁有更好的插件生態系統，包括許多特定於博客的插件。 Gatsby還高度依賴於GraphQL，您可能會根據自己的觀點和需求喜歡或不喜歡這一點。

Next.js 中的絕對導入

如果我們在 Next.js 的 React 組件中可以避免使用相對路徑來導入，那該有多好呢？ 所以，舉個例子： import Layout from '../../components/layout' 我們可以直接這樣寫： import Layout from 'components/layout' 這是可能的，它被稱為絕對導入。 只需在項目的根目錄添加一個名為 jsconfig.json 的文件，並將其內容設置為： { "compilerOptions": { "baseUrl": "." } } 這就是了，絕對導入就會開始工作。

Next.js 如何在開發環境中顯示某些內容並在生產環境中隱藏

我想在網站上只有在開發環境中（在我的本地機器上）顯示某些信息，而在部署後的網站上則隱藏掉。 以下是我如何實現的： const isDev = process.env.NODE_ENV === 'development' {isDev && ( <p>僅限於本地</p> )}

Next.js 如何在新視窗中開啟連結

以下是在 Next.js 中如何在新視窗中開啟連結的方法： <Link href={url}> <a target="_blank">點擊這個連結</a> </Link> 首先，將 a 標籤包裹在 Link 元件中（這是 Next.js 提供的 Link 元件），然後在 a 標籤內部加入 target="_blank" 屬性，就像在純 HTML 中一樣。 href 屬性保留在 Link 元件上，以便與客戶端路由相容。

Next.js 添加的應用程式圖示

了解 Next.js 開發模式中生成的圖示的含義 在 Next.js 應用程式上工作時，您是否看到頁面右下角有一個小圖示，看起來像一道閃電？ 如果將鼠標懸停在上面，它會顯示 “Prerendered page”： 這個圖示只在開發模式下可見，它告訴您該頁面符合自動靜態優化的條件，這基本上意味著它不依賴於必須在調用時獲取的數據，並且在構建時（運行 npm run build 時）可以預渲染並構建為靜態 HTML 文件。 Next.js 通過檢查頁面組件是否附加了 getInitialProps() 方法來確定這一點。 當這種情況發生時，我們的頁面會更快，因為它將以靜態 HTML 文件的形式提供，而不是通過生成 HTML 輸出的 Node.js 服務器。 可能會在它旁邊或非預渲染頁面上顯示的另一個有用的圖示是一個小的動畫三角形： 這是一個編譯指示器，在保存頁面並在 Next.js 編譯應用程式之前，熱代碼重新加載自動重新加載應用程式中的代碼之前，它會出現。 這是一種很好的方式，可以立即確定應用程式是否已編譯完畢，並且您可以測試正在工作的部分。

Next.js，在開發模式下新增功能

如何在開發模式下使功能可用，而在生產環境中隱藏它們 我工作的一些網站/應用程序有2種模式，一種是開發模式，另一種是生產模式，即上線版本。 使用Next.js，我發現通過檢查process.env.NODE_ENV的值來實現這一點非常容易，當使用npm run dev運行時，它的值設置為'development'。 因此，我可能有一個不應該對外公開的API路由，我在其頂部添加以下代碼： if (process.env.NODE\_ENV != 'development') return null 這樣就不會在生產環境中運行。 同樣，頁面組件也是如此，如果在生產環境中訪問，將渲染一個空白頁面。 我使用同樣的技術，在僅在開發模式下的組件中添加JSX代碼： { process.env.NODE\_ENV == 'development' && <div>hi</div> }

Next.js，在導航時組件狀態未刷新時應該怎麼辦

我遇到了這個問題，基本上我的組件使用了 useState() hook 來設置一些變量，但在使用路由進行導航時，狀態並沒有被更新。 事實證明，我的自定義 _app.js 代碼，這段代碼是我從教程中複製過來的，只是用於為應用添加全局樣式，其中存在著這段代碼： export default function App({ Component, pageProps }) { return <Component {...pageProps} /> } 我將其更改為： import { useRouter } from 'next/router' export default function App({ Component, pageProps }) { const router = useRouter() return <Component {...pageProps} key={router.asPath} /> } 這樣做後，它又按預期工作了。 我只需將路徑作為 key 添加即可。

Next.js: 使用自訂標籤填充 head 標籤

如何自訂 Next.js 應用程式的 head 標籤 從任何 Next.js 頁面元件中，您都可以向頁面標頭添加資訊。 這在以下情況下很方便： 您想要自訂頁面標題 您想要更改元標籤 您該如何做呢？ 在每個元件內部，您可以從 ’next/head’ 中 import ‘Head’ 元件，並將其包含在您的元件 JSX 輸出中： import Head from 'next/head' const House = props => ( <div> <Head> <title>頁面標題</title> </Head> {/\* 其餘的 JSX 內容 \*/} </div> ) export default House 您可以添加任何您希望出現在頁面 <head> 區塊內的 HTML 標籤。 在掛載元件時，Next.js 會確保將 Head 內的標籤添加到頁面的標頭中。在卸載元件時，Next.js 會處理刪除這些標籤。

Next.js：在 Next.js 中只在伺服器端或客戶端執行程式碼

如何編寫僅在前端或後端其中一方執行的程式碼 在您的頁面組件中，您可以通過檢查window屬性來僅在伺服器端或客戶端執行程式碼。 該屬性僅在瀏覽器中存在，因此您可以進行檢查： if (typeof window === 'undefined') { } 並將伺服器端程式碼放入該區塊中。 同樣地，您可以通過檢查進行僅客戶端程式碼的執行： if (typeof window !== 'undefined') { } JS提示：我們在這裡使用typeof運算符，因為我們無法以其他方式檢測到一個值是否未定義。我們不能做if (window === undefined)，因為這樣會得到一個“window is not defined”的運行時錯誤 作為構建時間優化，Next.js還會從bundles中刪除使用這些檢查的程式碼。客戶端bundle將不會包含包裹在if (typeof window === 'undefined') {}區塊中的內容。