next.js 串接 google recaptcha verify2 invisible 新手教學

,

我不是機器人驗證，在一些敏感資訊的交互時候可以加上，確保操作者確實是本人。

驗證方式Google有提供兩個版本：v2、v3

其中v2版本又分為：checkbox（就是會有一個勾勾要打勾選我不是機器人）、invisible（從背景打api驗證送給後端）

閱讀更多
0
/0 評論/通過：

如何在 next.js 中使用巢狀的 layout？

,

通常我們的網站會有Topbar、Footer之類的，在next.js專案中我們會把這樣的layout寫在一起：

閱讀更多
0
/0 評論/通過：

如何使用 Doceker 打包 next.js 專案？

, ,

使用 next.js 製作網站不外乎就是為了 ssr 這個重點，因為一般的 SPA 網站像是純 react 或 vue，是沒有 seo 的，也就是當我們做好網站，google 搜尋引擎是搜尋不到你的內容的。

閱讀更多
0
/0 評論/通過：

如何在 react native 中使用 chartjs？

,

網頁中使用報表可以選擇chartjs，他有很美的畫面，在github上的星星數有56k顆，也算是很穩定，是我接案最常用的一個報表套件。

閱讀更多
0
/0 評論/通過：

[不安裝套件] react 嵌入 TradingView 即時圖表

, ,

像股票一樣，虛擬幣也有已經開發好可用的即時蠟燭圖，TradingView這個網站讓我們甚至不用安裝套件，就可以直接嵌入任何網站。

但是react是es6 module，所以沒辦法直接用他官網的範例(CDN)直接貼上，所以我們需要改寫一下做成component方便放在各頁面中使用。

閱讀更多
0
/0 評論/通過：

react 連動 chrome metamask 錢包地址

,

我一直在想要怎要打標題才能完整表達這篇教學的大綱XD

簡單來說就是虛擬幣正夯，針對電子錢包的網頁也出了很多api方便應用，其中metamask就有一款chrome擴充程式就叫做「MetaMask」可以在瀏覽器上使用電子錢包，當你的chrome有安裝這個插件，就可以不用進入到metamask官網也可以使用你的錢包。

他們也有web3的方式可以讓你直接用js取得資料，讓你在自己開發的網頁上取得使用者的錢包，當然會有一系列驗證機制取得權限，但這部分metamask都幫你做好了，就像串接google login一樣簡單，今天我們要用的就是這個功能！

閱讀更多
1+
/0 評論/通過：

react-router-dom v6 如何回到上一頁

,

如題，好像以前都是用useHistory，但新版本改掉了，寫法更簡單。

閱讀更多
1+
/0 評論/通過：

react 使用 useContext 實現跨組件存取狀態

,

我們在傳狀態到子組件時最常用的就是props，但是如果我們的組件非常多層，不可能一層一層props傳下去，這時候就可以使用redux或是react useContext hook來實現。今天就是要來介紹：useContext。

閱讀更多
0
/0 評論/通過：