在 React (Next.js) 取得是否第一頁面以及完整的 history 瀏覽記錄，並修正 document.referrer

前言

最近遇到一個需求，要做回上一頁的按鈕。
我的專案是用nextjs，簡單粗暴router.back()就完事。
但問題來了，當user首次拜訪有返回鍵的頁面時，點擊返回鍵希望回到首頁而不是離開我們的頁面！

原本以為應該不難解決…

最初想說只需要搭配pathnname記錄有沒有換頁應該就行
結果發現若頁面一直往後點擊下去，當 user 開始操作 browser 上、下一頁的操作時，按鈕就壞了。

因為pathname只會告訴你網址變了。但不會知道是點擊連結還是上下一頁的操作

那原生的 history 呢？

框架不提供沒關係，原生的 history 總該有吧！畢竟那2顆按鈕可是札札實實的桌面程式按鈕。理應由browser提供才是。

沒有。沒錯。沒有提供。

點擊上下一頁時，browser 都會呼叫 onPopState 事件。除此之外就沒了。也不會告訴你是怎麼到達這裡的

看起來是一個簡單的需求，卻非常不簡單

搜尋了npm，也沒看到有相關的套件可以使用。原本打算要推掉這個需求了
但總想試試看，應該有機會解決才是

最後成功使用原生 history API 完成需求。
才剛完成不久，剛好得知之前記錄 tracking 時會從 document.referrer 拿來源
但使用 Next 框架，document.referrer 永遠都會停在第一次進來時的來源連結。
研究了一下發現，要完全讓 referrer正確，只靠 nextjs 是解不掉的。因為只要 user 有觸發到上下一頁就會全部錯亂

發佈到npm！

想想可能不會只有我有這個需求吧！所以重新整理程式碼後，就發佈到 npm 上了！
有下列功能：

• 判斷現在是否為第一頁面(解決上一頁按鈕需求)
• 修正 document.referrer
• 判斷user是如何到達目前頁面(back/forward/push)
• 記錄目前完整的瀏覽記錄

現在只要

npm i react-page-tracker

就可以輕鬆解決

為了怕大家不太理解實際用途，順手做了個demo，可以玩玩看

至於回上一頁的實際使用範例，我也做了個 sample