diff --git a/next.config.js b/next.config.js
index 272cd4d8..153ed944 100644
--- a/next.config.js
+++ b/next.config.js
@@ -44,6 +44,10 @@ module.exports = withBundleAnalyzer({
 
   webpack(cfg) {
     validateRequiredEnv()
+
+    // disable resolving canvas module for react-pdf in Next.js
+    // https://github.com/wojtekmaj/react-pdf?tab=readme-ov-file#nextjs
+    cfg.resolve.alias.canvas = false
     return cfg
   },
   images: {
diff --git a/site.config.js b/site.config.js
index 2bf33377..38f5e7d9 100644
--- a/site.config.js
+++ b/site.config.js
@@ -17,7 +17,7 @@ const normalizeId = (id) => {
 
 // env-var cannot read `NEXT_PUBLIC_` prefix env variables on client-side
 const currentEnv = process.env.NEXT_PUBLIC_APP_ENV || 'production'
-module.exports = {
+const siteConfig = {
   aws: {
     s3bucket: env.get('AWS_S3_BUCKET').asString(),
   },
@@ -41,7 +41,6 @@ module.exports = {
     url: env.get('CACHE_CLIENT_API_URL').asString(),
   },
   cdnHost: 'static.dazedbear.pro',
-  currentEnv,
   failsafe: {
     // AWS S3 upload limit rate: 3500 per sec, ref: https://docs.aws.amazon.com/zh_tw/AmazonS3/latest/userguide/optimizing-performance.html
     // concurrency limit to 30 since redis max connection is fixed to 30 based on the basic plan, ref: https://redis.com/redis-enterprise-cloud/pricing/
@@ -272,3 +271,8 @@ module.exports = {
     },
   },
 }
+
+siteConfig.currentEnv = currentEnv
+siteConfig.currentWebsite = siteConfig.website[currentEnv]
+
+module.exports = siteConfig
diff --git a/src/app/[pageName]/[pageSlug]/page.tsx b/src/app/[pageName]/[pageSlug]/page.tsx
new file mode 100644
index 00000000..a835ca9c
--- /dev/null
+++ b/src/app/[pageName]/[pageSlug]/page.tsx
@@ -0,0 +1,52 @@
+import NotionArticleDetailPage from '../../notion/article-detail-page'
+import { getNotionContent } from '../../notion/content'
+import { PAGE_TYPE_NOTION_ARTICLE_DETAIL_PAGE } from '../../../libs/constant'
+import { getPageMeta } from '../../../libs/util'
+import { getPageProperty } from '../../../libs/notion'
+import log from '../../../libs/server/log'
+
+export async function generateMetadata({ params, searchParams }) {
+  const { pageName, pageSlug } = params
+
+  // hack way to get fetched article property.
+  // TODO: need to find a way to pass property instead of redundant request.
+  const { pageContent, pageId } = await getNotionContent({
+    pageType: PAGE_TYPE_NOTION_ARTICLE_DETAIL_PAGE,
+    pageName,
+    pageSlug,
+    searchParams,
+  })
+  const property: any = getPageProperty({ pageId, recordMap: pageContent })
+  const metaOverride = {
+    title: property?.PageTitle,
+  }
+
+  return getPageMeta(metaOverride, pageName)
+}
+
+const ArticleListPage = async ({ params, searchParams }) => {
+  const { pageName, pageSlug } = params
+  const { menuItems, pageContent, pageId, toc } = await getNotionContent({
+    pageType: PAGE_TYPE_NOTION_ARTICLE_DETAIL_PAGE,
+    pageName,
+    pageSlug,
+    searchParams,
+  })
+
+  log({
+    category: PAGE_TYPE_NOTION_ARTICLE_DETAIL_PAGE,
+    message: `dumpaccess to /${pageName}/${pageSlug}`,
+    level: 'info',
+  })
+  return (
+    <NotionArticleDetailPage
+      pageId={pageId}
+      pageName={pageName}
+      pageContent={pageContent}
+      menuItems={menuItems}
+      toc={toc}
+    />
+  )
+}
+
+export default ArticleListPage
diff --git a/src/app/[pageName]/page.tsx b/src/app/[pageName]/page.tsx
new file mode 100644
index 00000000..237bb578
--- /dev/null
+++ b/src/app/[pageName]/page.tsx
@@ -0,0 +1,33 @@
+import NotionArticleListPage from '../notion/article-list-page'
+import { getNotionContent } from '../notion/content'
+import { PAGE_TYPE_NOTION_ARTICLE_LIST_PAGE } from '../../libs/constant'
+import { getPageMeta } from '../../libs/util'
+import log from '../../libs/server/log'
+
+export async function generateMetadata({ params: { pageName } }) {
+  return getPageMeta({}, pageName)
+}
+
+const ArticleListPage = async ({ params, searchParams }) => {
+  const { pageName } = params
+  const { menuItems, articleStream } = await getNotionContent({
+    pageType: PAGE_TYPE_NOTION_ARTICLE_LIST_PAGE,
+    pageName,
+    searchParams,
+  })
+
+  log({
+    category: PAGE_TYPE_NOTION_ARTICLE_LIST_PAGE,
+    message: `dumpaccess to /${pageName}`,
+    level: 'info',
+  })
+  return (
+    <NotionArticleListPage
+      pageName={pageName}
+      menuItems={menuItems}
+      articleStream={articleStream}
+    />
+  )
+}
+
+export default ArticleListPage
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
new file mode 100644
index 00000000..7e68b381
--- /dev/null
+++ b/src/app/about/page.tsx
@@ -0,0 +1,28 @@
+import { getPageMeta } from '../../libs/util'
+import NotionSinglePage from '../notion/single-page'
+import { getNotionContent } from '../notion/content'
+import { PAGE_TYPE_NOTION_SINGLE_PAGE } from '../../libs/constant'
+import log from '../../libs/server/log'
+
+const pageName = 'about'
+
+export async function generateMetadata() {
+  return getPageMeta({}, pageName)
+}
+
+const AboutPage = async ({ searchParams }) => {
+  const { pageContent } = await getNotionContent({
+    pageType: PAGE_TYPE_NOTION_SINGLE_PAGE,
+    pageName,
+    searchParams,
+  })
+
+  log({
+    category: PAGE_TYPE_NOTION_SINGLE_PAGE,
+    message: `dumpaccess to /${pageName}`,
+    level: 'info',
+  })
+  return <NotionSinglePage pageName="about" pageContent={pageContent} />
+}
+
+export default AboutPage
diff --git a/src/pages/api/sitemap.ts b/src/app/api/sitemap/route.ts
similarity index 56%
rename from src/pages/api/sitemap.ts
rename to src/app/api/sitemap/route.ts
index 94f5c3ca..0fa0f4aa 100644
--- a/src/pages/api/sitemap.ts
+++ b/src/app/api/sitemap/route.ts
@@ -1,42 +1,35 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import {
-  getCategory,
-  validateRequest,
-  setAPICacheHeaders,
-} from '../../libs/server/api'
+import type { NextRequest } from 'next/server'
 import get from 'lodash/get'
 import { SitemapStream, streamToPromise } from 'sitemap'
 import { Readable } from 'stream'
 import pMap from 'p-map'
 import * as dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
-import log from '../../libs/server/log'
-import { fetchArticleStream } from '../../libs/server/page'
+import log from '../../../libs/server/log'
+import { fetchArticleStream } from '../../../libs/server/page'
 import {
   transformArticleStream,
   transformPageUrls,
-} from '../../libs/server/transformer'
+} from '../../../libs/server/transformer'
 import {
   currentEnv,
   pages,
   notion,
   cache as cacheConfig,
   website,
-} from '../../../site.config'
-import cacheClient from '../../libs/server/cache'
-import { FORCE_CACHE_REFRESH_QUERY } from '../../libs/constant'
-
-const route = '/sitemap'
-const methods = ['GET']
+} from '../../../../site.config'
+import cacheClient from '../../../libs/server/cache'
+import { FORCE_CACHE_REFRESH_QUERY } from '../../../libs/constant'
 
 dayjs.extend(utc)
-const category = getCategory(route)
 
-const generateSiteMapXml = async (req) => {
+const category = 'API route: /api/sitemap'
+
+const generateSiteMapXml = async () => {
   // get all enabled static page paths
   const pageUrls = Object.values(pages)
-    .map((item) => item.enabled && item.page)
-    .filter((path) => path)
+    .filter((item) => item.enabled)
+    .map((item) => item.page)
 
   // get all enabled notion list page paths
   const currentNotionListUrls: string[][] = await pMap(
@@ -48,14 +41,12 @@ const generateSiteMapXml = async (req) => {
         log({
           category,
           message: `skip generate urls since this pageName is disabled | pageName: ${pageName}`,
-          req,
         })
         return []
       }
       switch (pageType) {
         case 'stream': {
           const response = await fetchArticleStream({
-            req,
             pageName,
             category,
           })
@@ -80,7 +71,7 @@ const generateSiteMapXml = async (req) => {
   )
 
   // all collected urls
-  const urls = [].concat(pageUrls, notionUrls).map((url) => ({ url }))
+  const urls = [...pageUrls, ...notionUrls].map((url) => ({ url }))
 
   // generate sitemap xml
   const stream = new SitemapStream({
@@ -95,32 +86,57 @@ const generateSiteMapXml = async (req) => {
   return sitemapXml
 }
 
-const handler = async (req: NextApiRequest, res: NextApiResponse) => {
-  try {
-    validateRequest(req, { route, methods })
+export async function GET(req: NextRequest) {
+  const searchParams = req.nextUrl.searchParams
+  const headers = req.headers
 
+  try {
     log({
       category,
       message: 'dumpaccess',
-      req,
     })
 
     // sitemap cache
-    cacheConfig.forceRefresh = req.query[FORCE_CACHE_REFRESH_QUERY] === '1'
+    cacheConfig.forceRefresh =
+      searchParams.get(FORCE_CACHE_REFRESH_QUERY) === '1'
+
     const sitemapXmlKey = `sitemap_${dayjs.utc().format('YYYY-MM-DD')}`
     const sitemapXml = await cacheClient.proxy(
       sitemapXmlKey,
       '/api/sitemap',
-      generateSiteMapXml.bind(this, req),
+      generateSiteMapXml.bind(this),
       { ttl: cacheConfig.ttls.sitemap }
     )
-    setAPICacheHeaders(res)
-    res.setHeader('Content-Type', 'application/xml')
-    res.status(200).end(sitemapXml)
+
+    const newHeaders = {
+      ...headers,
+      'Content-Type': 'application/xml',
+      /**
+       * < s-maxage: data is fresh, serve cache. X-Vercel-Cache HIT
+       * s-maxage - stale-while-revalidate: data is stale, still serve cache and start background new cache generation. X-Vercel-Cache STALE
+       * > stale-while-revalidate: data is stale and cache won't be used any more. X-Vercel-Cache MISS
+       *
+       * @see https://vercel.com/docs/concepts/edge-network/caching#serverless-functions---lambdas
+       * @see https://vercel.com/docs/concepts/edge-network/x-vercel-cache
+       * @see https://web.dev/stale-while-revalidate/
+       */
+      'Cache-Control': 'public, s-maxage=30, stale-while-revalidate=86400',
+    }
+
+    return new Response(sitemapXml, {
+      status: 200,
+      headers: newHeaders,
+    })
   } catch (err) {
     const statusCode = err.status || 500
-    res.status(statusCode).send(err.message)
+
+    log({
+      category,
+      message: err.message,
+    })
+
+    return new Response('Oops, something went wrong.', {
+      status: statusCode,
+    })
   }
 }
-
-export default handler
diff --git a/src/app/app.tsx b/src/app/app.tsx
new file mode 100644
index 00000000..2d70254b
--- /dev/null
+++ b/src/app/app.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+import Header from '../components/header'
+import Footer from '../components/footer'
+import {
+  useCodeSyntaxHighlight,
+  useResizeHandler,
+  useInitLogRocket,
+} from '../libs/client/hooks'
+import wrapper from '../libs/client/store'
+
+// TODO: new progress bar while route change
+
+const App = ({
+  // Layouts must accept a children prop.
+  // This will be populated with nested layouts or pages
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  useInitLogRocket()
+  useResizeHandler()
+  useCodeSyntaxHighlight()
+
+  const pathname = usePathname()
+
+  return (
+    <div id="app">
+      <Header pathname={pathname || '/'} />
+      <div id="main-content">{children}</div>
+      <Footer />
+    </div>
+  )
+}
+
+export default wrapper.withRedux(App)
diff --git a/src/app/custom-script.tsx b/src/app/custom-script.tsx
new file mode 100644
index 00000000..16f81bb7
--- /dev/null
+++ b/src/app/custom-script.tsx
@@ -0,0 +1,79 @@
+'use client'
+
+import {
+  FAILSAFE_PAGE_GENERATION_QUERY,
+  END_TO_END_TEST_QUERY,
+} from '../libs/constant'
+import {
+  communityFeatures,
+  currentEnv,
+  trackingSettings,
+} from '../../site.config'
+
+const isLocal = currentEnv === 'development'
+const prependCheck = (inputScript) => `if(!window.DBS.isBot){${inputScript}}`
+
+const CustomScript = () => {
+  return (
+    <>
+      {/* custom script for bot query detection */}
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+            (function(w){
+              const qry = ['${END_TO_END_TEST_QUERY}', '${FAILSAFE_PAGE_GENERATION_QUERY}'];
+              if (!w.DBS) {
+                w.DBS = {};
+              }
+              w.DBS.isBot = qry.some(key => window.location.search.includes(key+'=1'));
+            })(window)`,
+        }}
+      />
+      {!isLocal && trackingSettings?.microsoftClarity?.enable && (
+        <script
+          dangerouslySetInnerHTML={{
+            __html: prependCheck(`(function(c,l,a,r,i,t,y){
+            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+        })(window, document, "clarity", "script", "${trackingSettings?.microsoftClarity?.id}");`),
+          }}
+        />
+      )}
+      {!isLocal && trackingSettings?.googleTagManager?.enable && (
+        <script
+          dangerouslySetInnerHTML={{
+            __html: prependCheck(`
+              (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+              'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+              })(window,document,'script','dataLayer','${trackingSettings?.googleTagManager?.id}');`),
+          }}
+        />
+      )}
+      {communityFeatures?.facebookChat?.enable && (
+        <script
+          dangerouslySetInnerHTML={{
+            __html: prependCheck(`
+                window.fbAsyncInit = function() {
+                  FB.init({
+                    xfbml            : true,
+                    version          : 'v13.0'
+                  });
+                };
+                (function(d, s, id) {
+                  var js, fjs = d.getElementsByTagName(s)[0];
+                  if (d.getElementById(id)) return;
+                  js = d.createElement(s); js.id = id;
+                  js.src = 'https://connect.facebook.net/zh_TW/sdk/xfbml.customerchat.js';
+                  fjs.parentNode.insertBefore(js, fjs);
+                }(document, 'script', 'facebook-jssdk'));`),
+          }}
+        />
+      )}
+    </>
+  )
+}
+
+export default CustomScript
diff --git a/src/app/error.tsx b/src/app/error.tsx
new file mode 100644
index 00000000..0c3cb013
--- /dev/null
+++ b/src/app/error.tsx
@@ -0,0 +1,9 @@
+'use client'
+
+import Error from 'next/error'
+
+const ErrorPage = ({ statusCode = 500 }) => {
+  return <Error statusCode={statusCode} title="This page is broken" />
+}
+
+export default ErrorPage
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 00000000..2520901c
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,48 @@
+import dynamic from 'next/dynamic'
+import App from './app'
+import { currentEnv, searchSettings } from '../../site.config'
+import { getPageMeta } from '../libs/util'
+
+// css
+import 'react-notion-x/src/styles.css'
+import 'prismjs/themes/prism-tomorrow.css'
+import 'nprogress/nprogress.css'
+import '@docsearch/css'
+import '../styles/global.css'
+import '../styles/notion.css'
+
+const isProduction = currentEnv === 'production'
+
+export async function generateMetadata() {
+  return getPageMeta()
+}
+
+const CustomScript = dynamic(() => import('./custom-script'), { ssr: false })
+
+const RootLayout = ({
+  // Layouts must accept a children prop.
+  // This will be populated with nested layouts or pages
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  // use `suppressHydrationWarning` to ignore extra attributes added by browser extensions
+  return (
+    <html lang="en" suppressHydrationWarning={true}>
+      <head>
+        <CustomScript />
+        {!isProduction && <meta name="robots" content="noindex" />}
+        <link
+          rel="preconnect"
+          href={`https://${searchSettings?.appId}-dsn.algolia.net`}
+          crossOrigin="anonymous"
+        />
+      </head>
+      <body suppressHydrationWarning={true}>
+        <App>{children}</App>
+      </body>
+    </html>
+  )
+}
+
+export default RootLayout
diff --git a/src/pages/maintain.tsx b/src/app/maintain/page.tsx
similarity index 88%
rename from src/pages/maintain.tsx
rename to src/app/maintain/page.tsx
index b8b55604..4de12007 100644
--- a/src/pages/maintain.tsx
+++ b/src/app/maintain/page.tsx
@@ -1,4 +1,11 @@
-import ExtLink from '../components/ext-link'
+import ExtLink from '../../components/ext-link'
+import { getPageMeta } from '../../libs/util'
+
+const pageName = 'maintain'
+
+export async function generateMetadata() {
+  return getPageMeta({}, pageName)
+}
 
 const MaintainPage = () => (
   <div className="homeContainer text-center">
diff --git a/src/pages/404.tsx b/src/app/not-found.tsx
similarity index 92%
rename from src/pages/404.tsx
rename to src/app/not-found.tsx
index c5b54f61..852a5eab 100644
--- a/src/pages/404.tsx
+++ b/src/app/not-found.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import Error from 'next/error'
 
 const NotFoundPage = () => {
diff --git a/src/app/notion/article-detail-page.tsx b/src/app/notion/article-detail-page.tsx
new file mode 100644
index 00000000..01197f17
--- /dev/null
+++ b/src/app/notion/article-detail-page.tsx
@@ -0,0 +1,89 @@
+'use client'
+
+import get from 'lodash/get'
+import cloneDeep from 'lodash/cloneDeep'
+import { NotionRenderer } from 'react-notion-x'
+import { notion } from '../../../site.config'
+import { getPageProperty, mapNotionPageLinkUrl } from '../../libs/notion'
+import { getDateStr } from '../../libs/util'
+import { useRemoveLinks } from '../../libs/client/hooks'
+import Breadcrumb from '../../components/breadcrumb'
+import NavMenu from '../../components/nav-menu'
+import TableOfContent from '../../components/toc'
+import NotionPageHeader from '../../components/notion-page-header'
+import NotionPageFooter from '../../components/notion-page-footer'
+import NotionComponentMap from '../../components/notion-components'
+
+const NotionArticleDetailPage = ({
+  menuItems = [],
+  pageContent,
+  pageId,
+  pageName,
+  toc,
+}: {
+  menuItems: object[]
+  pageContent: object
+  pageId: string
+  pageName: string
+  toc: object[]
+}) => {
+  // disable links from notion table.
+  useRemoveLinks({
+    selector: '.notion-table a.notion-page-link',
+    condition: () => true,
+  })
+
+  if (!pageContent) {
+    return null
+  }
+  // hack to temporarily fix "cannot assign type to read-only object" issue in react-notion-x
+  const recordMap = cloneDeep(pageContent)
+  const previewImagesEnabled: boolean = get(notion, ['previewImages', 'enable'])
+  const property: any = getPageProperty({ pageId, recordMap })
+  const enableToc: boolean = toc && toc.length > 0
+
+  const pageHeader = (
+    <NotionPageHeader
+      title={property.PageTitle}
+      publishDate={getDateStr(get(property, ['Publish Date', 'start_date']))}
+      lastEditedDate={getDateStr(property.LastEditedTime)}
+      cover={property.PageCover}
+      recordMap={recordMap}
+    />
+  )
+  const pageFooter = <NotionPageFooter />
+
+  return (
+    <div
+      id="notion-article-detail-page"
+      data-namespace={pageName}
+      className="mx-auto my-0 flex max-w-1400 flex-grow flex-row flex-nowrap justify-center px-5 py-0 pt-24 lg:pt-12"
+    >
+      <Breadcrumb
+        title={get(notion, ['pages', pageName, 'navMenuTitle'])}
+        enableToc={enableToc}
+      />
+      <NavMenu
+        title={get(notion, ['pages', pageName, 'navMenuTitle'])}
+        menuItems={menuItems}
+      />
+      <NotionRenderer
+        blockId={pageId}
+        components={NotionComponentMap}
+        className="overflow-y-scroll pt-20 lg:max-h-full-viewport lg:w-3-cols-center lg:pt-10"
+        recordMap={recordMap}
+        fullPage={false}
+        darkMode={false}
+        mapPageUrl={mapNotionPageLinkUrl.bind(this, pageName, recordMap)}
+        pageHeader={pageHeader}
+        pageFooter={pageFooter}
+        previewImages={previewImagesEnabled}
+        showTableOfContents={false}
+        showCollectionViewDropdown={false}
+      />
+      <TableOfContent toc={toc} />
+    </div>
+  )
+}
+
+export default NotionArticleDetailPage
diff --git a/src/app/notion/article-list-page.tsx b/src/app/notion/article-list-page.tsx
new file mode 100644
index 00000000..da12f1db
--- /dev/null
+++ b/src/app/notion/article-list-page.tsx
@@ -0,0 +1,57 @@
+'use client'
+
+import get from 'lodash/get'
+import cloneDeep from 'lodash/cloneDeep'
+import { NotionRenderer } from 'react-notion-x'
+
+import Breadcrumb from '../../components/breadcrumb'
+import NavMenu from '../../components/nav-menu'
+import NotionComponentMap from '../../components/notion-components'
+import { notion } from '../../../site.config'
+import { mapNotionPageLinkUrl } from '../../libs/notion'
+
+const NotionArticleListPage = ({
+  menuItems,
+  pageName,
+  articleStream,
+}: {
+  menuItems: object[]
+  pageName: string
+  articleStream: any
+}) => {
+  if (!articleStream?.content) {
+    return null
+  }
+
+  const previewImagesEnabled: boolean = get(notion, ['previewImages', 'enable'])
+
+  // hack to temporarily fix "cannot assign type to read-only object" issue in react-notion-x
+  const recordMap = cloneDeep(articleStream.content)
+
+  // TODO: pagination support
+
+  return (
+    <div
+      id="notion-article-list-page"
+      data-namespace={pageName}
+      className="mx-auto my-0 flex max-w-1100 flex-grow flex-row flex-nowrap px-5 py-0 pt-24 lg:pt-12"
+    >
+      <Breadcrumb title={get(notion, ['pages', pageName, 'navMenuTitle'])} />
+      <NavMenu
+        title={get(notion, ['pages', pageName, 'navMenuTitle'])}
+        menuItems={menuItems}
+      />
+      <NotionRenderer
+        className="overflow-y-scroll lg:max-h-full-viewport"
+        fullPage={false}
+        recordMap={recordMap}
+        components={NotionComponentMap}
+        mapPageUrl={mapNotionPageLinkUrl.bind(this, pageName, recordMap)}
+        previewImages={previewImagesEnabled}
+        showCollectionViewDropdown={false}
+      />
+    </div>
+  )
+}
+
+export default NotionArticleListPage
diff --git a/src/app/notion/content.ts b/src/app/notion/content.ts
new file mode 100644
index 00000000..addd11c6
--- /dev/null
+++ b/src/app/notion/content.ts
@@ -0,0 +1,178 @@
+import merge from 'lodash/merge'
+import { ReadonlyURLSearchParams, notFound } from 'next/navigation'
+import { idToUuid } from 'notion-utils'
+import { pageProcessTimeout, cache } from '../../../site.config'
+import {
+  FAILSAFE_PAGE_GENERATION_QUERY,
+  FORCE_CACHE_REFRESH_QUERY,
+  PAGE_TYPE_NOTION_SINGLE_PAGE,
+  PAGE_TYPE_NOTION_ARTICLE_LIST_PAGE,
+  PAGE_TYPE_NOTION_ARTICLE_DETAIL_PAGE,
+} from '../../libs/constant'
+import log from '../../libs/server/log'
+import {
+  fetchSinglePage,
+  fetchArticleStream,
+  isValidPageName,
+  isValidPageSlug,
+  executeFunctionWithTimeout,
+} from '../../libs/server/page'
+import {
+  transformArticleStream,
+  transformArticleStreamPreviewImages,
+  transformMenuItems,
+  transformSinglePage,
+  transformSingleArticle,
+  transformTableOfContent,
+} from '../../libs/server/transformer'
+import { extractSinglePagePath } from '../../libs/notion'
+
+export const getNotionContent = async ({
+  pageName,
+  searchParams,
+  pageType,
+  pageSlug = '',
+}: {
+  pageName: string
+  pageType: string
+  pageSlug?: string | string[]
+  searchParams: ReadonlyURLSearchParams | null
+}) => {
+  let timeout = pageProcessTimeout
+
+  if (searchParams) {
+    timeout = searchParams[FAILSAFE_PAGE_GENERATION_QUERY] === '1' ? 0 : timeout
+    cache.forceRefresh = searchParams[FORCE_CACHE_REFRESH_QUERY] === '1'
+  }
+
+  const content = await executeFunctionWithTimeout(
+    async () => {
+      try {
+        switch (pageType) {
+          case PAGE_TYPE_NOTION_SINGLE_PAGE: {
+            if (!isValidPageName(pageName)) {
+              log({
+                category: pageType,
+                message: `invalid page | pageName: ${pageName}`,
+                level: 'warn',
+              })
+              return notFound()
+            }
+            const response = await fetchSinglePage({
+              pageName,
+              category: pageType,
+            })
+            const pageContent = await transformSinglePage(response)
+
+            return { pageContent }
+          }
+
+          case PAGE_TYPE_NOTION_ARTICLE_LIST_PAGE: {
+            if (!isValidPageName(pageName)) {
+              log({
+                category: pageType,
+                message: `invalid page | pageName: ${pageName}`,
+                level: 'warn',
+              })
+              return notFound()
+            }
+            const response = await fetchArticleStream({
+              pageName,
+              category: pageType,
+            })
+            let articleStream = await transformArticleStream(pageName, response)
+            articleStream = await transformArticleStreamPreviewImages(
+              articleStream
+            )
+            const menuItems = transformMenuItems(pageName, articleStream)
+
+            return {
+              menuItems,
+              articleStream,
+            }
+          }
+
+          case PAGE_TYPE_NOTION_ARTICLE_DETAIL_PAGE: {
+            if (!isValidPageName(pageName) || !isValidPageSlug(pageSlug)) {
+              log({
+                category: pageType,
+                message: `invalid page | pageName: ${pageName} | pageSlug: ${pageSlug}`,
+                level: 'warn',
+              })
+              return notFound()
+            }
+
+            const { pageId: articleId } = extractSinglePagePath(pageSlug)
+
+            // fetch all article stream to build menu
+            const response = await fetchArticleStream({
+              pageName,
+              category: pageType,
+            })
+            let articleStream = await transformArticleStream(pageName, response)
+            articleStream = await transformArticleStreamPreviewImages(
+              articleStream
+            )
+
+            // validate if article uuid exist in the article stream to prevent being an SSRF proxy host for external uuids.
+            const articleIds = articleStream?.ids || []
+            if (!articleIds.includes(idToUuid(articleId))) {
+              log({
+                category: pageType,
+                message: `[malformed] detect external abusive article uuid | pageName: ${pageName} | pageSlug: ${pageSlug}`,
+                level: 'warn',
+              })
+              return notFound()
+            }
+
+            // since getPage for collection view returns all pages with partial blocks, get target article then merge to articleStream to add missing blocks
+            const singleArticleResponse = await fetchArticleStream({
+              pageId: articleId,
+              category: PAGE_TYPE_NOTION_ARTICLE_DETAIL_PAGE,
+            })
+            let singleArticle = await transformSingleArticle(
+              singleArticleResponse
+            )
+            singleArticle = await transformArticleStreamPreviewImages(
+              singleArticle
+            )
+            articleStream = merge(articleStream, singleArticle)
+
+            const pageId = idToUuid(articleId)
+            const pageContent = articleStream?.content
+            const menuItems = transformMenuItems(pageName, articleStream)
+            const toc = transformTableOfContent(articleStream, articleId)
+
+            return { menuItems, pageContent, pageId, toc }
+          }
+
+          default: {
+            const message = pageSlug
+              ? `invalid pageType | pageType: ${pageType} | pageSlug: ${pageSlug}`
+              : `invalid pageType | pageType: ${pageType}`
+
+            throw Error(message)
+          }
+        }
+      } catch (err) {
+        log({
+          category: pageType,
+          message: err,
+          level: 'error',
+        })
+        throw err
+      }
+    },
+    timeout,
+    (duration) => {
+      log({
+        category: pageType,
+        message: `page processing timeout | duration: ${duration} ms`,
+        level: 'warn',
+      })
+    },
+    pageType
+  )
+
+  return content
+}
diff --git a/src/app/notion/single-page.tsx b/src/app/notion/single-page.tsx
new file mode 100644
index 00000000..1498b4e9
--- /dev/null
+++ b/src/app/notion/single-page.tsx
@@ -0,0 +1,77 @@
+'use client'
+
+// for Prism.js language highlight
+import 'prismjs'
+import 'prismjs/components/prism-markup'
+import 'prismjs/components/prism-markup-templating'
+import 'prismjs/components/prism-css'
+import 'prismjs/components/prism-css-extras'
+import 'prismjs/components/prism-javascript'
+import 'prismjs/components/prism-typescript'
+// prism-php has a dependency: prism-markup-templating.
+// see: https://github.com/PrismJS/prism/issues/1400#issuecomment-485847919
+import 'prismjs/components/prism-php'
+import 'prismjs/components/prism-php-extras'
+import 'prismjs/components/prism-bash'
+import 'prismjs/components/prism-shell-session'
+import 'prismjs/components/prism-json'
+import 'prismjs/components/prism-vim'
+import 'prismjs/components/prism-graphql'
+import 'prismjs/components/prism-jsx'
+import 'prismjs/components/prism-tsx'
+import 'prismjs/components/prism-yaml'
+import 'prismjs/components/prism-docker'
+import 'prismjs/components/prism-log'
+
+import get from 'lodash/get'
+import cloneDeep from 'lodash/cloneDeep'
+import { NotionRenderer } from 'react-notion-x'
+
+import NotionComponentMap from '../../components/notion-components'
+import { notion } from '../../../site.config'
+import { mapNotionPageLinkUrl } from '../../libs/notion'
+import { useRemoveLinks } from '../../libs/client/hooks'
+
+const NotionSinglePage = ({
+  pageName,
+  pageContent,
+}: {
+  pageName: string
+  pageContent: object
+}) => {
+  // disable links from notion table.
+  useRemoveLinks({
+    selector: '.notion-table a.notion-page-link',
+    condition: () => true,
+  })
+
+  if (!pageContent) {
+    return null
+  }
+
+  const blockId: string = get(notion, ['pages', pageName, 'pageId'])
+  const previewImagesEnabled: boolean = get(notion, ['previewImages', 'enable'])
+
+  // hack to temporarily fix "cannot assign type to read-only object" issue in react-notion-x
+  const recordMap = cloneDeep(pageContent)
+
+  return (
+    <div
+      id={`notion-${pageName}-page`}
+      data-namespace={pageName}
+      className="mx-auto my-0 flex max-w-1100 flex-grow flex-row flex-nowrap px-5 py-0 pt-24 lg:pt-12"
+    >
+      <NotionRenderer
+        blockId={blockId}
+        fullPage={false}
+        recordMap={recordMap}
+        components={NotionComponentMap}
+        mapPageUrl={mapNotionPageLinkUrl.bind(this, pageName, recordMap)}
+        previewImages={previewImagesEnabled}
+        showCollectionViewDropdown={false}
+      />
+    </div>
+  )
+}
+
+export default NotionSinglePage
diff --git a/src/pages/index.tsx b/src/app/page.tsx
similarity index 98%
rename from src/pages/index.tsx
rename to src/app/page.tsx
index cd45279a..9f267266 100644
--- a/src/pages/index.tsx
+++ b/src/app/page.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { meta } from '../../site.config'
 
 const Homepage = () => (
diff --git a/src/components/header.tsx b/src/components/header.tsx
index da2a8c41..35a44515 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,6 +1,5 @@
 import Image from 'next/image'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
 import classnames from 'classnames'
 import ExtLink from './ext-link'
 import { meta, navigation as navItems, searchSettings } from '../../site.config'
@@ -26,9 +25,8 @@ const themeClassMap = {
   },
 }
 
-const Header = () => {
-  const router = useRouter()
-  const currentTheme = isActivePage('/', router) ? 'modern' : 'classic'
+const Header = ({ pathname = '' }: { pathname: string }) => {
+  const currentTheme = isActivePage('/', pathname) ? 'modern' : 'classic'
   const linkClass =
     'box-border items-center border-0 border-white text-base m-0 p-2.5 justify-center flex flex-row flex-nowrap h-12 z-1000 transition duration-300 lg:h-8 font-normal lg:py-1.5 lg:px-2.5'
   const liniInActiveClass = themeClassMap[currentTheme]?.linkInActive || ''
@@ -72,7 +70,7 @@ const Header = () => {
                   if (!enabled) {
                     return null
                   }
-                  const isActive = isActivePage(page, router)
+                  const isActive = isActivePage(page, pathname)
                   return (
                     <li
                       key={label}
diff --git a/src/components/notion-page-footer.tsx b/src/components/notion-page-footer.tsx
index e6b4365e..c6b9ae27 100644
--- a/src/components/notion-page-footer.tsx
+++ b/src/components/notion-page-footer.tsx
@@ -1,5 +1,5 @@
 import { communitySettings, communityFeatures } from '../../site.config'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, ReactElement } from 'react'
 
 // https://docs.like.co/developer/likecoin-button/iframe
 const likecoin = ({ url }) =>
@@ -31,7 +31,7 @@ const NotionPageFooter = () => {
   }, [setCurrentUrl])
 
   const communityComponents = communityFeatures.articleFooter.reduce(
-    (enableItems, { name, enable }) => {
+    (enableItems: ReactElement[], { name, enable }) => {
       if (enable) {
         const Component = socialFeatureComponentMap[name]
         enableItems.push(<Component key={name} url={currentUrl} />)
diff --git a/src/libs/client/hooks.ts b/src/libs/client/hooks.ts
index e81dda94..370bcd13 100644
--- a/src/libs/client/hooks.ts
+++ b/src/libs/client/hooks.ts
@@ -1,10 +1,8 @@
 import { useEffect, useState } from 'react'
 import prism from 'prismjs'
-import get from 'lodash/get'
 import throttle from 'lodash/throttle'
 import debounce from 'lodash/debounce'
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
-import { useRouter } from 'next/router'
 import LogRocket from 'logrocket'
 import { AppState, AppDispatch } from './store'
 import {
@@ -13,14 +11,7 @@ import {
   updateTableOfContentViewability,
   updateViewport,
 } from './slices/layout'
-import {
-  currentEnv,
-  trackingSettings,
-  notion,
-  meta as commonMeta,
-  pages as staticPages,
-} from '../../../site.config'
-import { PageMeta } from '../../../types'
+import { currentEnv, trackingSettings } from '../../../site.config'
 
 /**
  * Pre-typed useSelector & useAppDispatch for react-redux.
@@ -135,8 +126,8 @@ export const useTOCScrollHandler = () => {
     // https://github.com/Purii/react-use-scrollspy
     const actionSectionScrollSpy = throttle(() => {
       const sections = document.getElementsByClassName(SECTION_CLASS_NAME)
-      let prevBBox: DOMRect = null
-      let currentSectionId: string = activeSectionId
+      let prevBBox: DOMRect | null = null
+      let currentSectionId: any = activeSectionId
 
       for (let i = 0; i < sections.length; ++i) {
         const section = sections[i]
@@ -163,12 +154,12 @@ export const useTOCScrollHandler = () => {
     }, THROTTLE_MILLIONSECOND)
 
     const container = document.querySelector(NOTION_MAIN_CONTENT_CLASS_NAME)
-    container.addEventListener('scroll', actionSectionScrollSpy) // for desktop case
+    container?.addEventListener('scroll', actionSectionScrollSpy) // for desktop case
     window.addEventListener('scroll', actionSectionScrollSpy) // for smartphone case
     actionSectionScrollSpy()
     return () => {
       window.removeEventListener('scroll', actionSectionScrollSpy)
-      container.removeEventListener('scroll', actionSectionScrollSpy)
+      container?.removeEventListener('scroll', actionSectionScrollSpy)
     }
   }, [])
   return {
@@ -201,51 +192,3 @@ export const useCodeSyntaxHighlight = () => {
     prism.highlightAll()
   })
 }
-
-/**
- * Custom hook to detect current next.js page is active or not
- * @param {string} page next.js page pathname
- * @returns {boolean} current next.js page is active or not
- */
-export const useCheckActivePage = (page) => {
-  const { asPath } = useRouter()
-  if (!page) {
-    return false
-  }
-  const pathname = asPath.replace(/\?.*/gi, '') // remove query params
-  const regex = new RegExp(`${page}(\/.+)+`, 'i')
-  return page === pathname || regex.test(pathname)
-}
-
-/**
- * Custom hook to get title of current page from navigation config
- * @returns {string} title of current page
- */
-export const useGetPageMeta = (pageMeta: PageMeta = {}): PageMeta => {
-  const { asPath } = useRouter()
-  const meta = {
-    title: commonMeta.title,
-    description: commonMeta.description,
-    image: commonMeta.image,
-  }
-
-  // pageMeta is for SSR pages override
-  // add fallback logic for static pages & SSR pages without meta override
-  const pathname = asPath.replace(/\?.*/gi, '') // remove query params
-  const page =
-    pathname === '/' ? 'index' : pathname.split('/').filter(Boolean)[0]
-  const pageTitle =
-    pageMeta.title ||
-    get(staticPages, [page, 'title']) ||
-    get(notion, ['pages', page, 'navMenuTitle'])
-  if (pageTitle) {
-    meta.title = `${pageTitle} · ${commonMeta.title}`
-  }
-  if (pageMeta.description) {
-    meta.description = pageMeta.description
-  }
-  if (pageMeta.image) {
-    meta.image = pageMeta.image
-  }
-  return meta
-}
diff --git a/src/libs/client/slices/index.ts b/src/libs/client/slices/index.ts
index b0be1cd6..3ea306c7 100644
--- a/src/libs/client/slices/index.ts
+++ b/src/libs/client/slices/index.ts
@@ -1,12 +1,8 @@
 import { combineReducers } from 'redux'
 import layout from './layout'
-import stream from './stream'
-import page from './page'
 
 const rootReducer = combineReducers({
   layout,
-  page,
-  stream,
 })
 
 export default rootReducer
diff --git a/src/libs/client/slices/page.ts b/src/libs/client/slices/page.ts
deleted file mode 100644
index c4b24b52..00000000
--- a/src/libs/client/slices/page.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { HYDRATE } from 'next-redux-wrapper'
-import get from 'lodash/get'
-import cloneDeep from 'lodash/cloneDeep'
-import merge from 'lodash/merge'
-import isEmpty from 'lodash/isEmpty'
-import { notion } from '../../../../site.config'
-
-const slideName = 'page'
-
-interface ContentState {}
-
-export interface ActionPayloadState {
-  name: string
-  data: ContentState
-}
-
-interface PageState {
-  [propName: string]: ContentState
-}
-
-type getInitialStateFn = () => PageState
-
-// generate initState from site.config.js notion.pages
-const getInitialState: getInitialStateFn = () => {
-  return Object.keys(notion.pages).reduce((initState, name) => {
-    const pageConfig = notion.pages[name]
-    if (pageConfig.enabled && pageConfig.type === slideName) {
-      initState[name] = {}
-    }
-    return initState
-  }, {})
-}
-
-/**
- * Slices
- */
-const PageSlice = createSlice({
-  name: slideName,
-  initialState: getInitialState(),
-  reducers: {
-    updateSinglePage(state, action: PayloadAction<ActionPayloadState>) {
-      const { name, data } = action.payload
-      state[name] = data
-    },
-  },
-  extraReducers: {
-    [HYDRATE]: (state, action) => {
-      const retainState = Object.keys(state).reduce((composite, name) => {
-        const currentState = get(state, [name])
-        if (!isEmpty(currentState)) {
-          composite[name] = cloneDeep(currentState)
-        }
-        return composite
-      }, {})
-      merge(state, action.payload[slideName], retainState)
-    },
-  },
-})
-
-export const { updateSinglePage } = PageSlice.actions
-
-export default PageSlice.reducer
diff --git a/src/libs/client/slices/stream.ts b/src/libs/client/slices/stream.ts
deleted file mode 100644
index 91283b59..00000000
--- a/src/libs/client/slices/stream.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { HYDRATE } from 'next-redux-wrapper'
-import get from 'lodash/get'
-import cloneDeep from 'lodash/cloneDeep'
-import merge from 'lodash/merge'
-import isEmpty from 'lodash/isEmpty'
-import { notion } from '../../../../site.config'
-
-interface ContentState {
-  content?: object
-  error?: any
-  hasNext?: boolean
-  ids?: string[]
-  index?: number
-  isLoading?: boolean
-  total?: number
-}
-
-export interface ActionPayloadState {
-  name: string
-  data: ContentState
-}
-
-interface StreamState {
-  [propName: string]: ContentState
-}
-
-type getInitialStateFn = () => StreamState
-
-// generate initState from site.config.js notion.pages
-const getInitialState: getInitialStateFn = () => {
-  const defaultContentState = {
-    content: {},
-    error: null,
-    hasNext: false,
-    ids: [],
-    index: 0,
-    isLoading: false,
-    total: 0,
-  }
-  return Object.keys(notion.pages).reduce((initState, name) => {
-    const pageConfig = notion.pages[name]
-    if (pageConfig.enabled && pageConfig.type === 'stream') {
-      initState[name] = Object.assign({}, defaultContentState)
-    }
-    return initState
-  }, {})
-}
-
-/**
- * Async Thunks
- */
-export const fetchStreamPosts = createAsyncThunk(
-  'stream/fetchStreamPosts',
-  async (
-    param: { index: number; count: number; pageName: string },
-    thunkAPI
-  ) => {
-    const response = await fetch(
-      `/api/posts?index=${param.index}&count=${param.count}&pageName=${param.pageName}`
-    )
-    if (!response.ok) {
-      const { status, statusText } = response
-      return thunkAPI.rejectWithValue({ status, statusText })
-    }
-    const data = await response.json()
-    return data
-  },
-  {
-    condition: (param, { getState }) => {
-      const state = getState()
-      if (get(state, ['stream', param.pageName, 'isLoading'])) {
-        return false
-      }
-      return true
-    },
-  }
-)
-
-/**
- * Slices
- */
-const StreamSlice = createSlice({
-  name: 'stream',
-  initialState: getInitialState(),
-  reducers: {
-    updateStream(state, action: PayloadAction<ActionPayloadState>) {
-      const { name, data } = action.payload
-      state[name] = data
-    },
-  },
-  extraReducers: {
-    [HYDRATE]: (state, action) => {
-      const retainState = Object.keys(state).reduce((composite, name) => {
-        const currentState = get(state, [name])
-        if (!isEmpty(currentState.content)) {
-          composite[name] = cloneDeep(currentState)
-        }
-        return composite
-      }, {})
-      merge(state, action.payload.stream, retainState)
-    },
-    [fetchStreamPosts.fulfilled as any]: (state, action) => {
-      const name = get(action, ['meta', 'arg', 'pageName'])
-      const ids = get(action, [
-        'payload',
-        'result',
-        'reducerResults',
-        'collection_group_results',
-        'blockIds',
-      ])
-      const total = get(action, [
-        'payload',
-        'result',
-        'reducerResults',
-        'table:uncategorized:title:count',
-        'aggregationResult',
-        'value',
-      ])
-      const index = get(action, [
-        'payload',
-        'result',
-        'reducerResults',
-        'collection_group_results',
-        'index',
-      ])
-      const hasNext = get(action, [
-        'payload',
-        'result',
-        'reducerResults',
-        'collection_group_results',
-        'hasMore',
-      ])
-      const content = get(action, ['payload', 'recordMap'])
-
-      state[name] = {
-        content: merge(state[name].content, content),
-        error: null,
-        hasNext,
-        ids,
-        index,
-        isLoading: false,
-        total,
-      }
-    },
-    [fetchStreamPosts.pending as any]: (state, action) => {
-      const name = get(action, ['meta', 'arg', 'pageName'])
-      state[name].isLoading = true
-    },
-    [fetchStreamPosts.rejected as any]: (state, action) => {
-      const name = get(action, ['meta', 'arg', 'pageName'])
-      state[name].error = action.error
-      state[name].isLoading = false
-    },
-  },
-})
-
-export const { updateStream } = StreamSlice.actions
-
-export default StreamSlice.reducer
diff --git a/src/libs/constant.js b/src/libs/constant.js
index bdc7dea9..d7606742 100644
--- a/src/libs/constant.js
+++ b/src/libs/constant.js
@@ -1,8 +1,7 @@
 module.exports = {
-  ABOUT_PAGE: 'AboutPage',
-  PAGE_TYPE_ARTICLE_LIST_PAGE: 'ArticleListPage',
-  PAGE_TYPE_ARTICLE_SINGLE_PAGE: 'ArticleSinglePage',
-  PAGE_TYPE_ERROR_PAGE: 'ErrorPage',
+  PAGE_TYPE_NOTION_SINGLE_PAGE: 'NotionSinglePage',
+  PAGE_TYPE_NOTION_ARTICLE_LIST_PAGE: 'NotionArticleListPage',
+  PAGE_TYPE_NOTION_ARTICLE_DETAIL_PAGE: 'NotionArticleDetailPage',
   END_TO_END_TEST_QUERY: 'e2e_test',
   FAILSAFE_PAGE_GENERATION_QUERY: 'fsg',
   FAILSAFE_PAGE_SERVING_QUERY: 'fs',
diff --git a/src/libs/server/api.ts b/src/libs/server/api.ts
deleted file mode 100644
index 8291e03d..00000000
--- a/src/libs/server/api.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import createError from 'http-errors'
-import Ajv from 'ajv'
-import addFormats from 'ajv-formats'
-import log from './log'
-
-const ajv = new Ajv()
-addFormats(ajv)
-
-const schemaMap = {
-  route: {
-    type: 'string',
-    format: 'uri-reference',
-  },
-  methods: {
-    type: 'array',
-    items: [
-      {
-        enum: ['GET', 'POST', 'OPTION', 'PUT', 'PATCH', 'DELETE'],
-      },
-    ],
-    minItems: 1,
-    additionalItems: false,
-  },
-  message: {
-    type: 'string',
-  },
-  querySchema: {
-    type: ['object', 'null'],
-  },
-}
-
-/**
- * getCategory
- * @param {string} route route path
- * @returns {string} log category prefix text
- */
-export const getCategory = (route: string) => {
-  const validate = ajv.compile(schemaMap.route)
-  if (!validate(route)) {
-    throw Error(`Invalid route found in getCategory: ${route}`)
-  }
-  return `API route: /api${route}`
-}
-
-/**
- * isSupportedMethod
- * @param {object} req next.js api request object
- * @param {array} methods allow request methods
- * @returns {boolean} true if request method is allowed
- */
-export const isSupportedMethod = (
-  req: NextApiRequest,
-  methods: Array<string>
-) => {
-  const validate = ajv.compile(schemaMap.methods)
-  if (!validate(methods)) {
-    throw Error(`Invalid HTTP request methods found: ${methods}`)
-  }
-  const allowMethods = new Set(methods)
-  return allowMethods.has(req.method)
-}
-
-/**
- * validateRequest
- * @param {object} req next.js api request object
- * @param {object} param param
- * @param {array} param.methods string array for allow http methods
- * @param {object} param.querySchema JSON schema for query params
- * @param {string} param.route route path
- * @returns {void}
- */
-export const validateRequest = (
-  req: NextApiRequest,
-  param: { methods: string[]; querySchema?: object; route: string }
-) => {
-  const schema = {
-    type: 'object',
-    additionalProperties: false,
-    properties: {
-      methods: schemaMap.methods,
-      querySchema: schemaMap.querySchema,
-      route: schemaMap.route,
-    },
-    required: ['methods', 'route'],
-  }
-  const validateParam = ajv.compile(schema)
-  if (!validateParam(param)) {
-    throw Error('Invalid param found validateRequest.')
-  }
-
-  const { methods, querySchema = {}, route } = param as any
-  const validate = ajv.compile(querySchema)
-  const category = getCategory(route)
-
-  if (!isSupportedMethod(req, methods)) {
-    log({
-      category,
-      message: `unsupport method: ${req.method}`,
-      level: 'warn',
-      req,
-    })
-    throw createError(400)
-  }
-  if (!validate(req.query)) {
-    log({
-      category,
-      message: `invalid query params: ${JSON.stringify(req.query)}`,
-      level: 'warn',
-      req,
-    })
-    throw createError(400)
-  }
-}
-
-/**
- * set cache headers for API routes
- * @param res {object} res
- */
-export const setAPICacheHeaders = (res: NextApiResponse): void => {
-  /**
-   * < s-maxage: data is fresh, serve cache. X-Vercel-Cache HIT
-   * s-maxage - stale-while-revalidate: data is stale, still serve cache and start background new cache generation. X-Vercel-Cache STALE
-   * > stale-while-revalidate: data is stale and cache won't be used any more. X-Vercel-Cache MISS
-   *
-   * @see https://vercel.com/docs/concepts/edge-network/caching#serverless-functions---lambdas
-   * @see https://vercel.com/docs/concepts/edge-network/x-vercel-cache
-   * @see https://web.dev/stale-while-revalidate/
-   */
-  res.setHeader(
-    'Cache-Control',
-    'public, s-maxage=30, stale-while-revalidate=86400'
-  )
-}
diff --git a/src/libs/server/cache.ts b/src/libs/server/cache.ts
index 65c644a9..03738d09 100644
--- a/src/libs/server/cache.ts
+++ b/src/libs/server/cache.ts
@@ -4,8 +4,8 @@ import log from './log'
 import { currentEnv, cache as cacheConfig } from '../../../site.config'
 
 class CacheClient {
-  client = null
-  option = null
+  client: any = null
+  option: any = null
 
   constructor(option) {
     this.option = option
diff --git a/src/libs/server/log.ts b/src/libs/server/log.ts
index 15db488e..f5a6231f 100644
--- a/src/libs/server/log.ts
+++ b/src/libs/server/log.ts
@@ -5,12 +5,7 @@ import { logOption } from '../../../types'
 chalk.level = 2 // disable level auto detection to make sure all log has correct color, see https://www.npmjs.com/package/chalk#chalklevel
 
 // level = debug, info, warn, error
-const log = ({
-  category = '',
-  message = '',
-  level = 'info',
-  req = null,
-}: logOption) => {
+const log = ({ category = '', message = '', level = 'info' }: logOption) => {
   const levelMap = {
     debug: {
       method: 'log',
diff --git a/src/libs/server/notion.ts b/src/libs/server/notion.ts
index ab1d0508..a1972881 100644
--- a/src/libs/server/notion.ts
+++ b/src/libs/server/notion.ts
@@ -190,10 +190,10 @@ export const getNotionPreviewImages = async (recordMap) => {
       message: 'recordMap not found in getNotionPreviewImages',
       level: 'error',
     })
-    return
+    return {}
   }
   const blockIds = Object.keys(recordMap.block)
-  const imageUrls: string[] = blockIds
+  const imageUrls: any[] = blockIds
     .map((blockId) => {
       const block = recordMap.block[blockId]?.value
       if (block) {
@@ -214,10 +214,13 @@ export const getNotionPreviewImages = async (recordMap) => {
           }
         }
       }
-      return null
+      return {
+        block: '',
+        url: '',
+      }
     })
-    .filter(Boolean)
-    .map(({ block, url }) => mapNotionImageUrl(url, block))
+    .filter(({ url, block }) => Boolean(url && block))
+    .map(({ url, block }) => mapNotionImageUrl(url, block))
     .filter(Boolean)
 
   const results = await pMap(
diff --git a/src/libs/server/page.ts b/src/libs/server/page.ts
index 8260401a..ebe80291 100644
--- a/src/libs/server/page.ts
+++ b/src/libs/server/page.ts
@@ -1,81 +1,15 @@
-import { GetServerSidePropsResult } from 'next'
 import { ExtendedRecordMap } from 'notion-types'
 import get from 'lodash/get'
-import * as URI from 'uri-js'
-import qs, { ParsedQs } from 'qs'
 import { performance } from 'perf_hooks'
 import {
-  ErrorPageProps,
   NotionPageName,
   logOption,
-  logLevel,
   GetServerSidePropsRequest,
-  GetServerSidePropsResponse,
 } from '../../../types'
 import log from './log'
 import { notion } from '../../../site.config'
 import { getNotionPage } from '../../libs/server/notion'
 
-/**
- * util to get common page props (404, 500) for getServerSideProps
- * @param req {object} req
- * @param res {object} res
- * @param type {string} type, support 'notFound', 'error' (default)
- * @param path {string} path string or string array
- * @returns pageProps
- */
-export const showCommonPage = (
-  req: GetServerSidePropsRequest,
-  res: GetServerSidePropsResponse,
-  type: 'notFound' | 'error',
-  path: string | string[]
-): GetServerSidePropsResult<ErrorPageProps | {}> => {
-  let level: logLevel | null = 'error'
-  let statusCode: number | null = null
-  let pageProps: any = {}
-
-  if (type === 'notFound') {
-    level = 'warn'
-    statusCode = 404
-    pageProps = {
-      notFound: true,
-    }
-  } else {
-    // append ?fs=1 to destination url
-    const failsafeQuery = { fs: 1 }
-    const urlObj: URI.URIComponents = URI.parse(req.url)
-    const urlQuery: ParsedQs = Object.assign(
-      {},
-      qs.parse(urlObj.query),
-      failsafeQuery
-    )
-    urlObj.query = qs.stringify(urlQuery)
-    const destination: string = URI.serialize(urlObj)
-
-    level = 'error'
-    statusCode = 500
-    // redirect to trigger rewrite to failsafe page
-    pageProps = {
-      redirect: {
-        destination,
-        permanent: false,
-      },
-    }
-  }
-
-  const options: logOption = {
-    category: 'page',
-    message: `render ${type} page | statusCode: ${statusCode} | path: /${
-      Array.isArray(path) ? path.join('/') : path
-    }`,
-    level,
-    req,
-  }
-  log(options)
-  res.statusCode = statusCode
-  return pageProps
-}
-
 /**
  * validate input pageName
  * @param {string} pageName
@@ -84,7 +18,7 @@ export const showCommonPage = (
 export const isValidPageName = (pageName: NotionPageName): boolean => {
   const pageId: string = get(notion, ['pages', pageName, 'pageId'])
   const pageEnabled: boolean = get(notion, ['pages', pageName, 'enabled'])
-  return pageId && pageEnabled
+  return Boolean(pageId && pageEnabled)
 }
 
 /**
@@ -104,12 +38,10 @@ export const isValidPageSlug = (pageSlug: string | string[]): boolean => {
  * @returns {object} raw data from upstream API
  */
 export const fetchArticleStream = async ({
-  req,
   pageName,
   pageId,
   category,
 }: {
-  req?: GetServerSidePropsRequest
   pageName?: NotionPageName
   pageId?: string
   category?: string
@@ -146,7 +78,6 @@ export const fetchArticleStream = async ({
       category: category || 'fetchArticleStream',
       message,
       level: 'error',
-      req,
     }
     log(options)
     throw Error('Required info are invalid in fetchArticleStream.')
@@ -158,12 +89,10 @@ export const fetchArticleStream = async ({
 
 /**
  * fetch single page content from upstream API
- * @param {object} req
  * @param {string} pageName
  * @returns {object} raw data from upstream API
  */
 export const fetchSinglePage = async ({
-  req,
   pageName,
   pageId,
   category,
@@ -195,7 +124,6 @@ export const fetchSinglePage = async ({
       category: category || 'fetchSinglePage',
       message,
       level: 'error',
-      req,
     }
     log(options)
     throw Error('Required info are invalid in fetchSinglePage.')
diff --git a/src/libs/server/transformer.ts b/src/libs/server/transformer.ts
index a37b33ef..c2b7c03f 100644
--- a/src/libs/server/transformer.ts
+++ b/src/libs/server/transformer.ts
@@ -1,7 +1,6 @@
 import get from 'lodash/get'
 import set from 'lodash/set'
 import isEmpty from 'lodash/isEmpty'
-import cloneDeep from 'lodash/cloneDeep'
 import Ajv from 'ajv'
 import addFormats from 'ajv-formats'
 import { ExtendedRecordMap } from 'notion-types'
@@ -10,7 +9,6 @@ import { getBlockTitle, idToUuid, getPageTableOfContents } from 'notion-utils'
 import { notion } from '../../../site.config'
 import log from './log'
 import { getNotionPreviewImages } from './notion'
-import { ActionPayloadState as StreamActionPayloadState } from '../client/slices/stream'
 import { getSinglePagePath, getPageProperty } from '../notion'
 import {
   ArticleStream,
@@ -248,7 +246,8 @@ export const transformMenuItems = (
   articleStream: ArticleStream
 ): MenuItem[] => {
   const recordMap = articleStream.content
-  const menuItems: MenuItem[] = articleStream.ids.reduce((items, pageId) => {
+  const ids = articleStream.ids || []
+  const menuItems: MenuItem[] = ids.reduce((items: any[], pageId) => {
     const pagePath = getSinglePagePath({
       pageName,
       pageId,
@@ -361,7 +360,8 @@ export const transformPageUrls = (
   articleStream: ArticleStream
 ): string[] => {
   const recordMap = articleStream.content
-  let pageUrls: string[] = articleStream.ids.reduce((items, pageId) => {
+  const ids: any[] = articleStream?.ids || []
+  let pageUrls: string[] = ids?.reduce((items, pageId) => {
     const pagePath = getSinglePagePath({
       pageName,
       pageId,
@@ -403,44 +403,6 @@ export const transformPageUrls = (
   return pageUrls
 }
 
-/**
- * transform article stream to updateStream action payload
- * @param {string} pageName
- * @param {object} articleStream
- * @returns {object} stream action payload
- */
-export const transformStreamActionPayload = (
-  pageName: NotionPageName,
-  articleStream: ArticleStream
-): StreamActionPayloadState => {
-  return {
-    name: pageName,
-    data: {
-      content: cloneDeep(articleStream.content),
-      hasNext: articleStream.hasNext,
-      ids: articleStream.ids,
-      index: articleStream.index,
-      total: articleStream.total,
-    },
-  }
-}
-
-/**
- * transform single page to updateSinglePage action payload
- * @param {string} pageName
- * @param {object} pageContent
- * @returns {object} stream action payload
- */
-export const transformPageActionPayload = (
-  pageName: NotionPageName,
-  pageContent: SinglePage
-): StreamActionPayloadState => {
-  return {
-    name: pageName,
-    data: cloneDeep(pageContent),
-  }
-}
-
 /**
  * transform article stream to table of content
  * @param {object} articleStream
diff --git a/src/libs/util.ts b/src/libs/util.ts
index b60db3d2..655624d4 100644
--- a/src/libs/util.ts
+++ b/src/libs/util.ts
@@ -3,6 +3,7 @@ import {
   notion,
   meta as commonMeta,
   pages as staticPages,
+  currentWebsite,
 } from '../../site.config'
 import { PageMeta } from '../../types'
 
@@ -23,14 +24,13 @@ export const getDateStr = (date) => {
 /**
  * detect current next.js page is active or not
  * @param {string} page next.js page pathname
+ * @param {string} pathname current next.js pathname
  * @returns {boolean} current next.js page is active or not
  */
-export const isActivePage = (page, router) => {
-  if (!page || !router) {
+export const isActivePage = (page, pathname) => {
+  if (!page || !pathname) {
     return false
   }
-  const { asPath } = router || {}
-  const pathname = asPath.replace(/\?.*/gi, '') // remove query params
   const regex = new RegExp(`${page}(\/.+)+`, 'i')
   return page === pathname || regex.test(pathname)
 }
@@ -39,34 +39,52 @@ export const isActivePage = (page, router) => {
  * get title of current page from navigation config
  * @returns {string} title of current page
  */
-export const getPageMeta = (pageMeta: PageMeta = {}, router): PageMeta => {
-  if (!router) {
+export const getPageMeta = (
+  pageMeta: PageMeta = {},
+  pageName: string = 'index'
+): PageMeta => {
+  if (!pageName) {
     return {}
   }
-  const { asPath } = router || {}
   const meta = {
+    metadataBase: new URL(
+      `${currentWebsite.protocol}://${currentWebsite.host}`
+    ),
     title: commonMeta.title,
     description: commonMeta.description,
     image: commonMeta.image,
+    openGraph: {
+      title: commonMeta.title,
+      description: commonMeta.description,
+      images: [
+        {
+          url: commonMeta.image,
+          alt: commonMeta.title,
+        },
+      ],
+    },
   }
 
   // pageMeta is for SSR pages override
   // add fallback logic for static pages & SSR pages without meta override
-  const pathname = asPath.replace(/\?.*/gi, '') // remove query params
-  const page =
-    pathname === '/' ? 'index' : pathname.split('/').filter(Boolean)[0]
   const pageTitle =
     pageMeta.title ||
-    get(staticPages, [page, 'title']) ||
-    get(notion, ['pages', page, 'navMenuTitle'])
+    get(staticPages, [pageName, 'title']) ||
+    get(notion, ['pages', pageName, 'navMenuTitle'])
+
   if (pageTitle) {
-    meta.title = `${pageTitle} · ${commonMeta.title}`
+    const newTitle = `${pageTitle} · ${commonMeta.title}`
+    meta.title = newTitle
+    meta.openGraph.title = newTitle
+    meta.openGraph.images[0].alt = newTitle
   }
   if (pageMeta.description) {
     meta.description = pageMeta.description
+    meta.openGraph.description = pageMeta.description
   }
   if (pageMeta.image) {
     meta.image = pageMeta.image
+    meta.openGraph.images[0].url = pageMeta.image
   }
   return meta
 }
diff --git a/src/pages/[pageName]/[pageSlug].tsx b/src/pages/[pageName]/[pageSlug].tsx
deleted file mode 100644
index 1ddf6104..00000000
--- a/src/pages/[pageName]/[pageSlug].tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-// for Prism.js language highlight
-import 'prismjs'
-import 'prismjs/components/prism-markup'
-import 'prismjs/components/prism-markup-templating'
-import 'prismjs/components/prism-css'
-import 'prismjs/components/prism-css-extras'
-import 'prismjs/components/prism-javascript'
-import 'prismjs/components/prism-typescript'
-// prism-php has a dependency: prism-markup-templating.
-// see: https://github.com/PrismJS/prism/issues/1400#issuecomment-485847919
-import 'prismjs/components/prism-php'
-import 'prismjs/components/prism-php-extras'
-import 'prismjs/components/prism-bash'
-import 'prismjs/components/prism-shell-session'
-import 'prismjs/components/prism-json'
-import 'prismjs/components/prism-vim'
-import 'prismjs/components/prism-graphql'
-import 'prismjs/components/prism-jsx'
-import 'prismjs/components/prism-tsx'
-import 'prismjs/components/prism-yaml'
-import 'prismjs/components/prism-docker'
-import 'prismjs/components/prism-log'
-
-import { GetServerSideProps } from 'next'
-import Error from 'next/error'
-import get from 'lodash/get'
-import cloneDeep from 'lodash/cloneDeep'
-import merge from 'lodash/merge'
-import { idToUuid } from 'notion-utils'
-import { NotionRenderer } from 'react-notion-x'
-
-import { logOption, ArticleStream } from '../../../types'
-import { notion, pageProcessTimeout, cache } from '../../../site.config'
-import {
-  FAILSAFE_PAGE_GENERATION_QUERY,
-  FORCE_CACHE_REFRESH_QUERY,
-  PAGE_TYPE_ARTICLE_SINGLE_PAGE,
-} from '../../libs/constant'
-import {
-  extractSinglePagePath,
-  getPageProperty,
-  mapNotionPageLinkUrl,
-} from '../../libs/notion'
-import { getDateStr } from '../../libs/util'
-import { useAppSelector, useRemoveLinks } from '../../libs/client/hooks'
-import wrapper from '../../libs/client/store'
-import { updateStream } from '../../libs/client/slices/stream'
-import log from '../../libs/server/log'
-import {
-  showCommonPage,
-  fetchArticleStream,
-  isValidPageSlug,
-  isValidPageName,
-  executeFunctionWithTimeout,
-} from '../../libs/server/page'
-import {
-  transformArticleStream,
-  transformArticleStreamPreviewImages,
-  transformSingleArticle,
-  transformArticleSinglePageMeta,
-  transformMenuItems,
-  transformStreamActionPayload,
-  transformTableOfContent,
-} from '../../libs/server/transformer'
-import Breadcrumb from '../../components/breadcrumb'
-import NavMenu from '../../components/nav-menu'
-import TableOfContent from '../../components/toc'
-import NotionPageHeader from '../../components/notion-page-header'
-import NotionPageFooter from '../../components/notion-page-footer'
-import NotionComponentMap from '../../components/notion-components'
-
-export const getServerSideProps: GetServerSideProps =
-  wrapper.getServerSideProps((store) => async ({ params, req, res, query }) => {
-    const pageName = params.pageName as string
-    const pageSlug = params.pageSlug as string
-    // disable page timeout when failsafe generation mode (?fsg=1)
-    const timeout =
-      query[FAILSAFE_PAGE_GENERATION_QUERY] === '1' ? 0 : pageProcessTimeout
-    cache.forceRefresh = query[FORCE_CACHE_REFRESH_QUERY] === '1'
-    const props = await executeFunctionWithTimeout(
-      async () => {
-        if (!isValidPageName(pageName) || !isValidPageSlug(pageSlug)) {
-          const options: logOption = {
-            category: PAGE_TYPE_ARTICLE_SINGLE_PAGE,
-            message: `invalid page | pageName: ${pageName} | pageSlug: ${pageSlug}`,
-            level: 'error',
-            req,
-          }
-          log(options)
-          return showCommonPage(req, res, 'notFound', [pageName, pageSlug])
-        }
-
-        const { pageId: articleId } = extractSinglePagePath(pageSlug)
-
-        try {
-          let articleStream: ArticleStream = {}
-          let singleArticle: ArticleStream = {}
-
-          // fetch all article stream
-          const response = await fetchArticleStream({
-            req,
-            pageName,
-            category: PAGE_TYPE_ARTICLE_SINGLE_PAGE,
-          })
-          articleStream = await transformArticleStream(pageName, response)
-          articleStream = await transformArticleStreamPreviewImages(
-            articleStream
-          )
-
-          // validate if article uuid exist in the article stream to prevent being an SSRF proxy host for external uuids.
-          if (!articleStream.ids.includes(idToUuid(articleId))) {
-            const options: logOption = {
-              category: PAGE_TYPE_ARTICLE_SINGLE_PAGE,
-              message: `[malformed] detect external abusive article uuid | pageName: ${pageName} | pageSlug: ${pageSlug}`,
-              level: 'error',
-              req,
-            }
-            log(options)
-            return showCommonPage(req, res, 'notFound', [pageName, pageSlug])
-          }
-
-          // since getPage for collection view returns all pages with partial blocks, getPage target article then merge to articleStream to add missing blocks
-          const singleArticleResponse = await fetchArticleStream({
-            req,
-            pageId: articleId,
-            category: PAGE_TYPE_ARTICLE_SINGLE_PAGE,
-          })
-          singleArticle = await transformSingleArticle(singleArticleResponse)
-          singleArticle = await transformArticleStreamPreviewImages(
-            singleArticle
-          )
-          articleStream = merge(articleStream, singleArticle)
-
-          const menuItems = transformMenuItems(pageName, articleStream)
-          const meta = transformArticleSinglePageMeta(articleStream, articleId)
-          const toc = transformTableOfContent(articleStream, articleId)
-
-          // save SSR fetch stream article contents to redux store
-          const payload = transformStreamActionPayload(pageName, articleStream)
-          const action = updateStream(payload)
-          store.dispatch(action)
-
-          const options: logOption = {
-            category: 'page',
-            message: `dumpaccess to /${pageName}/${pageSlug}`,
-            level: 'info',
-            req,
-          }
-          log(options)
-          return {
-            props: {
-              menuItems,
-              meta,
-              pageId: idToUuid(articleId),
-              pageName,
-              toc,
-            },
-          }
-        } catch (err) {
-          const options: logOption = {
-            category: PAGE_TYPE_ARTICLE_SINGLE_PAGE,
-            message: err,
-            level: 'error',
-            req,
-          }
-          log(options)
-          return showCommonPage(req, res, 'error', [pageName, pageSlug])
-        }
-      },
-      timeout,
-      (duration) => {
-        const options: logOption = {
-          category: PAGE_TYPE_ARTICLE_SINGLE_PAGE,
-          message: `page processing timeout | duration: ${duration} ms`,
-          level: 'warn',
-          req,
-        }
-        log(options)
-        return showCommonPage(req, res, 'error', [pageName, pageSlug])
-      },
-      PAGE_TYPE_ARTICLE_SINGLE_PAGE
-    )
-    return props
-  })
-
-const ArticleSinglePage = ({
-  hasError,
-  menuItems = [],
-  pageId,
-  pageName,
-  toc,
-}) => {
-  const streamState = useAppSelector((state) => state.stream)
-
-  // disable links from notion table.
-  useRemoveLinks({
-    selector: '.notion-table a.notion-page-link',
-    condition: () => true,
-  })
-
-  if (hasError) {
-    return <Error statusCode={500} title="This page is broken" />
-  }
-
-  const content: any = get(streamState, [pageName, 'content'])
-  // hack to temporarily fix "cannot assign type to read-only object" issue in react-notion-x
-  const recordMap = cloneDeep(content)
-  const previewImagesEnabled: boolean = get(notion, ['previewImages', 'enable'])
-  const property: any = getPageProperty({ pageId, recordMap })
-  const enableToc: boolean = toc && toc.length > 0
-
-  const pageHeader = (
-    <NotionPageHeader
-      title={property.PageTitle}
-      publishDate={getDateStr(get(property, ['Publish Date', 'start_date']))}
-      lastEditedDate={getDateStr(property.LastEditedTime)}
-      cover={property.PageCover}
-      recordMap={recordMap}
-    />
-  )
-  const pageFooter = <NotionPageFooter />
-
-  return (
-    <div
-      id="notion-single-page"
-      data-namespace={pageName}
-      className="mx-auto my-0 flex max-w-1400 flex-grow flex-row flex-nowrap justify-center px-5 py-0 pt-24 lg:pt-12"
-    >
-      <Breadcrumb
-        title={get(notion, ['pages', pageName, 'navMenuTitle'])}
-        enableToc={enableToc}
-      />
-      <NavMenu
-        title={get(notion, ['pages', pageName, 'navMenuTitle'])}
-        menuItems={menuItems}
-      />
-      <NotionRenderer
-        blockId={pageId}
-        components={NotionComponentMap}
-        className="overflow-y-scroll pt-20 lg:max-h-full-viewport lg:w-3-cols-center lg:pt-10"
-        recordMap={recordMap}
-        fullPage={false}
-        darkMode={false}
-        mapPageUrl={mapNotionPageLinkUrl.bind(this, pageName, recordMap)}
-        pageHeader={pageHeader}
-        pageFooter={pageFooter}
-        previewImages={previewImagesEnabled}
-        showTableOfContents={false}
-        showCollectionViewDropdown={false}
-      />
-      <TableOfContent toc={toc} />
-    </div>
-  )
-}
-
-export default ArticleSinglePage
diff --git a/src/pages/[pageName]/index.tsx b/src/pages/[pageName]/index.tsx
deleted file mode 100644
index 2eb2bd35..00000000
--- a/src/pages/[pageName]/index.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import { GetServerSideProps } from 'next'
-import Error from 'next/error'
-import get from 'lodash/get'
-import cloneDeep from 'lodash/cloneDeep'
-import VisibilitySensor from 'react-visibility-sensor'
-import { NotionRenderer } from 'react-notion-x'
-import { FaCircleNotch, FaRedo } from 'react-icons/fa'
-
-import Breadcrumb from '../../components/breadcrumb'
-import NavMenu from '../../components/nav-menu'
-import Placeholder from '../../components/placeholder'
-import NotionComponentMap from '../../components/notion-components'
-import { notion, pageProcessTimeout, cache } from '../../../site.config'
-import {
-  FAILSAFE_PAGE_GENERATION_QUERY,
-  FORCE_CACHE_REFRESH_QUERY,
-  PAGE_TYPE_ARTICLE_LIST_PAGE,
-} from '../../libs/constant'
-import { mapNotionPageLinkUrl } from '../../libs/notion'
-import log from '../../libs/server/log'
-import wrapper from '../../libs/client/store'
-import { updateStream, fetchStreamPosts } from '../../libs/client/slices/stream'
-import { useAppSelector, useAppDispatch } from '../../libs/client/hooks'
-import {
-  showCommonPage,
-  fetchArticleStream,
-  isValidPageName,
-  executeFunctionWithTimeout,
-} from '../../libs/server/page'
-import {
-  transformArticleStream,
-  transformArticleStreamPreviewImages,
-  transformMenuItems,
-  transformStreamActionPayload,
-} from '../../libs/server/transformer'
-import { logOption } from '../../../types'
-
-export const getServerSideProps: GetServerSideProps =
-  wrapper.getServerSideProps((store) => async ({ params, query, req, res }) => {
-    const pageName = params.pageName as string
-    // disable page timeout when failsafe generation mode (?fsg=1)
-    const timeout =
-      query[FAILSAFE_PAGE_GENERATION_QUERY] === '1' ? 0 : pageProcessTimeout
-    cache.forceRefresh = query[FORCE_CACHE_REFRESH_QUERY] === '1'
-    const props = await executeFunctionWithTimeout(
-      async () => {
-        if (!isValidPageName(pageName)) {
-          const options: logOption = {
-            category: PAGE_TYPE_ARTICLE_LIST_PAGE,
-            message: `invalid page | pageName: ${pageName}`,
-            level: 'error',
-            req,
-          }
-          log(options)
-          return showCommonPage(req, res, 'notFound', pageName)
-        }
-
-        try {
-          const response = await fetchArticleStream({
-            req,
-            pageName,
-            category: PAGE_TYPE_ARTICLE_LIST_PAGE,
-          })
-          let articleStream = await transformArticleStream(pageName, response)
-          articleStream = await transformArticleStreamPreviewImages(
-            articleStream
-          )
-          const menuItems = transformMenuItems(pageName, articleStream)
-
-          // save SSR fetch stream article contents to redux store
-          const payload = transformStreamActionPayload(pageName, articleStream)
-          const action = updateStream(payload)
-          store.dispatch(action)
-
-          const options: logOption = {
-            category: 'page',
-            message: `dumpaccess to /${pageName}`,
-            level: 'info',
-            req,
-          }
-          log(options)
-          return {
-            props: {
-              menuItems,
-              pageName,
-            },
-          }
-        } catch (err) {
-          const options: logOption = {
-            category: PAGE_TYPE_ARTICLE_LIST_PAGE,
-            message: err,
-            level: 'error',
-            req,
-          }
-          log(options)
-          return showCommonPage(req, res, 'error', pageName)
-        }
-      },
-      timeout,
-      (duration) => {
-        const options: logOption = {
-          category: PAGE_TYPE_ARTICLE_LIST_PAGE,
-          message: `page processing timeout | duration: ${duration} ms`,
-          level: 'warn',
-          req,
-        }
-        log(options)
-        return showCommonPage(req, res, 'error', pageName)
-      },
-      PAGE_TYPE_ARTICLE_LIST_PAGE
-    )
-    return props
-  })
-
-const ArticleListPage = ({ hasError, menuItems, pageName }) => {
-  const streamState = useAppSelector((state) => state.stream)
-  const dispatch = useAppDispatch()
-
-  if (hasError) {
-    return <Error statusCode={500} title="This page is broken" />
-  }
-
-  const blockId: string = get(notion, ['pages', pageName, 'collectionViewId'])
-  const count: number = get(notion, ['pagination', 'batchLoadCount'])
-  const content: any = get(streamState, [pageName, 'content'])
-  const error: boolean = get(streamState, [pageName, 'error'])
-  const hasNext: boolean = get(streamState, [pageName, 'hasNext'])
-  const index: number = get(streamState, [pageName, 'index'], 0)
-  const isLoading: boolean = get(streamState, [pageName, 'isLoading'])
-  const paginationEnabled: boolean = get(notion, ['pagination', 'enabled'])
-  const previewImagesEnabled: boolean = get(notion, ['previewImages', 'enable'])
-
-  // hack to temporarily fix "cannot assign type to read-only object" issue in react-notion-x
-  const recordMap = cloneDeep(content)
-  const NotionPageFooter = () => {
-    if (!paginationEnabled) {
-      return null
-    }
-
-    if (isLoading) {
-      return (
-        <div className="m-0 block w-full rounded-md bg-gray-200 py-4 text-center">
-          <p className="inline-block text-center text-sm text-gray-700">
-            文章讀取中...
-            <span className="ml-2 inline-block w-4 animate-spin text-center">
-              <FaCircleNotch />
-            </span>
-          </p>
-        </div>
-      )
-    }
-
-    if (error) {
-      return (
-        <button
-          className="m-0 block w-full rounded-md bg-gray-200 py-4 text-center"
-          onClick={() => dispatch(fetchStreamPosts({ index, count, pageName }))}
-        >
-          <p className="inline-block text-center text-sm text-gray-700">
-            文章讀取發生了問題. 請點此再試一次.
-            <span className="ml-2 inline-block w-4 text-center">
-              <FaRedo />
-            </span>
-          </p>
-        </button>
-      )
-    }
-
-    if (hasNext) {
-      const handlePaginationFetch = (isVisible) => {
-        if (isVisible && !isLoading) {
-          dispatch(fetchStreamPosts({ index, count, pageName }))
-        }
-      }
-      return (
-        <VisibilitySensor
-          key={`placeholder-${index}`}
-          onChange={handlePaginationFetch}
-          partialVisibility={true}
-          minTopValue={250}
-        >
-          <Placeholder
-            itemCount={count}
-            wrapperClassNames="border-t border-gray-300"
-          />
-        </VisibilitySensor>
-      )
-    }
-    return null
-  }
-
-  return (
-    <div
-      id="notion-list-page"
-      data-namespace={pageName}
-      className="mx-auto my-0 flex max-w-1100 flex-grow flex-row flex-nowrap px-5 py-0 pt-24 lg:pt-12"
-    >
-      <Breadcrumb title={get(notion, ['pages', pageName, 'navMenuTitle'])} />
-      <NavMenu
-        title={get(notion, ['pages', pageName, 'navMenuTitle'])}
-        menuItems={menuItems}
-      />
-      <NotionRenderer
-        className="overflow-y-scroll lg:max-h-full-viewport"
-        fullPage={false}
-        recordMap={recordMap}
-        components={NotionComponentMap}
-        mapPageUrl={mapNotionPageLinkUrl.bind(this, pageName, recordMap)}
-        previewImages={previewImagesEnabled}
-        pageFooter={NotionPageFooter()}
-        showCollectionViewDropdown={false}
-      />
-    </div>
-  )
-}
-
-export default ArticleListPage
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
deleted file mode 100644
index 45f734cf..00000000
--- a/src/pages/_app.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-// css
-import 'react-notion-x/src/styles.css'
-import 'prismjs/themes/prism-tomorrow.css'
-import 'nprogress/nprogress.css'
-import '@docsearch/css'
-import '../styles/global.css'
-import '../styles/notion.css'
-
-import Header from '../components/header'
-import Footer from '../components/footer'
-import {
-  useCodeSyntaxHighlight,
-  useResizeHandler,
-  useInitLogRocket,
-} from '../libs/client/hooks'
-import wrapper from '../libs/client/store'
-import { getPageMeta } from '../libs/util'
-import Router, { useRouter } from 'next/router'
-import Head from 'next/head'
-import NProgress from 'nprogress'
-
-// loading progress bar
-NProgress.configure({ parent: '#main-content', showSpinner: false })
-Router.events.on('routeChangeStart', () => NProgress.start())
-Router.events.on('routeChangeComplete', () => NProgress.done())
-Router.events.on('routeChangeError', () => NProgress.done())
-
-const App = ({ Component, pageProps }) => {
-  useInitLogRocket()
-  useResizeHandler()
-  useCodeSyntaxHighlight()
-  const router = useRouter()
-  const { title, description, image } = getPageMeta(pageProps.meta, router)
-  return (
-    <div id="app">
-      <Head>
-        <title>{title}</title>
-        <meta name="description" content={description} />
-        <meta name="og:title" content={title} />
-        <meta property="og:image" content={image} />
-      </Head>
-      <Header />
-      <div id="main-content">
-        <Component {...pageProps} />
-      </div>
-      <Footer />
-    </div>
-  )
-}
-
-export default wrapper.withRedux(App)
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
deleted file mode 100644
index cb1bf471..00000000
--- a/src/pages/_document.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
-import {
-  FAILSAFE_PAGE_GENERATION_QUERY,
-  END_TO_END_TEST_QUERY,
-} from '../libs/constant'
-import {
-  communityFeatures,
-  currentEnv,
-  searchSettings,
-  trackingSettings,
-} from '../../site.config'
-
-const isLocal = currentEnv === 'development'
-const isProduction = currentEnv === 'production'
-
-class MyDocument extends Document {
-  render() {
-    const prependCheck = (inputScript) =>
-      `if(!window.DBS.isBot){${inputScript}}`
-    return (
-      <Html lang="en">
-        <Head>
-          {/* custom script for bot query detection */}
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `
-              (function(w){
-                const qry = ['${END_TO_END_TEST_QUERY}', '${FAILSAFE_PAGE_GENERATION_QUERY}'];
-                if (!w.DBS) {
-                  w.DBS = {};
-                }
-                w.DBS.isBot = qry.some(key => window.location.search.includes(key+'=1'));
-              })(window)`,
-            }}
-          />
-          {!isLocal && trackingSettings?.microsoftClarity?.enable && (
-            <script
-              dangerouslySetInnerHTML={{
-                __html: prependCheck(`(function(c,l,a,r,i,t,y){
-              c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-              t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-              y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-          })(window, document, "clarity", "script", "${trackingSettings?.microsoftClarity?.id}");`),
-              }}
-            />
-          )}
-          {!isLocal && trackingSettings?.googleTagManager?.enable && (
-            <script
-              dangerouslySetInnerHTML={{
-                __html: prependCheck(`
-                (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-                new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-                j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-                'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-                })(window,document,'script','dataLayer','${trackingSettings?.googleTagManager?.id}');`),
-              }}
-            />
-          )}
-          {communityFeatures?.facebookChat?.enable && (
-            <script
-              dangerouslySetInnerHTML={{
-                __html: prependCheck(`
-                  window.fbAsyncInit = function() {
-                    FB.init({
-                      xfbml            : true,
-                      version          : 'v13.0'
-                    });
-                  };
-                  (function(d, s, id) {
-                    var js, fjs = d.getElementsByTagName(s)[0];
-                    if (d.getElementById(id)) return;
-                    js = d.createElement(s); js.id = id;
-                    js.src = 'https://connect.facebook.net/zh_TW/sdk/xfbml.customerchat.js';
-                    fjs.parentNode.insertBefore(js, fjs);
-                  }(document, 'script', 'facebook-jssdk'));`),
-              }}
-            />
-          )}
-          {!isProduction && <meta name="robots" content="noindex" />}
-          <link
-            rel="preconnect"
-            href={`https://${searchSettings?.appId}-dsn.algolia.net`}
-            crossOrigin="anonymous"
-          />
-        </Head>
-        <body>
-          {communityFeatures?.facebookChat?.enable && (
-            <>
-              <div id="fb-root" />
-              <div id="fb-customer-chat" className="fb-customerchat" />
-              <script
-                dangerouslySetInnerHTML={{
-                  __html: prependCheck(`
-                    var chatbox = document.getElementById('fb-customer-chat');
-                    chatbox.setAttribute("page_id", "${communityFeatures.facebookChat.pageId}");
-                    chatbox.setAttribute("attribution", "biz_inbox");`),
-                }}
-              />
-            </>
-          )}
-          {!isLocal && trackingSettings?.googleTagManager?.enable && (
-            <noscript>
-              <iframe
-                src={`https://www.googletagmanager.com/ns.html?id=${trackingSettings?.googleTagManager?.id}`}
-                height="0"
-                width="0"
-                style={{ display: 'none', visibility: 'hidden' }}
-              />
-            </noscript>
-          )}
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    )
-  }
-}
-
-export default MyDocument
diff --git a/src/pages/_error.tsx b/src/pages/_error.tsx
deleted file mode 100644
index 99db5af9..00000000
--- a/src/pages/_error.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import Error from 'next/error'
-import { logOption } from '../../types'
-import log from '../libs/server/log'
-import { showCommonPage } from '../libs/server/page'
-import { PAGE_TYPE_ERROR_PAGE } from '../libs/constant'
-
-export const getServerSideProps = async ({ req, res, err }) => {
-  if (err) {
-    const options: logOption = {
-      category: PAGE_TYPE_ERROR_PAGE,
-      message: err,
-      level: 'error',
-      req,
-    }
-    log(options)
-  }
-  return showCommonPage(req, res, 'error', req.url.split('/'))
-}
-
-const ErrorPage = ({ statusCode = 500 }) => {
-  return <Error statusCode={statusCode} title="This page is broken" />
-}
-
-export default ErrorPage
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
deleted file mode 100644
index 1cdbbb03..00000000
--- a/src/pages/about.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-// for Prism.js language highlight
-import 'prismjs'
-import 'prismjs/components/prism-markup'
-import 'prismjs/components/prism-markup-templating'
-import 'prismjs/components/prism-css'
-import 'prismjs/components/prism-css-extras'
-import 'prismjs/components/prism-javascript'
-import 'prismjs/components/prism-typescript'
-// prism-php has a dependency: prism-markup-templating.
-// see: https://github.com/PrismJS/prism/issues/1400#issuecomment-485847919
-import 'prismjs/components/prism-php'
-import 'prismjs/components/prism-php-extras'
-import 'prismjs/components/prism-bash'
-import 'prismjs/components/prism-shell-session'
-import 'prismjs/components/prism-json'
-import 'prismjs/components/prism-vim'
-import 'prismjs/components/prism-graphql'
-import 'prismjs/components/prism-jsx'
-import 'prismjs/components/prism-tsx'
-import 'prismjs/components/prism-yaml'
-import 'prismjs/components/prism-docker'
-import 'prismjs/components/prism-log'
-
-import { GetServerSideProps } from 'next'
-import Error from 'next/error'
-import get from 'lodash/get'
-import cloneDeep from 'lodash/cloneDeep'
-import { NotionRenderer } from 'react-notion-x'
-
-import NotionComponentMap from '../components/notion-components'
-import { notion, pageProcessTimeout, cache } from '../../site.config'
-import {
-  FAILSAFE_PAGE_GENERATION_QUERY,
-  FORCE_CACHE_REFRESH_QUERY,
-  ABOUT_PAGE,
-} from '../libs/constant'
-import { mapNotionPageLinkUrl } from '../libs/notion'
-import log from '../libs/server/log'
-import wrapper from '../libs/client/store'
-import { updateSinglePage } from '../libs/client/slices/page'
-import { useAppSelector, useRemoveLinks } from '../libs/client/hooks'
-import {
-  showCommonPage,
-  fetchSinglePage,
-  isValidPageName,
-  executeFunctionWithTimeout,
-} from '../libs/server/page'
-import {
-  transformSinglePage,
-  transformPageActionPayload,
-} from '../libs/server/transformer'
-import { logOption } from '../../types'
-
-const pageName = 'about'
-
-export const getServerSideProps: GetServerSideProps =
-  wrapper.getServerSideProps((store) => async ({ query, req, res }) => {
-    // disable page timeout when failsafe generation mode (?fsg=1)
-    const timeout =
-      query[FAILSAFE_PAGE_GENERATION_QUERY] === '1' ? 0 : pageProcessTimeout
-    cache.forceRefresh = query[FORCE_CACHE_REFRESH_QUERY] === '1'
-    const props = await executeFunctionWithTimeout(
-      async () => {
-        if (!isValidPageName(pageName)) {
-          const options: logOption = {
-            category: ABOUT_PAGE,
-            message: `invalid page | pageName: ${pageName}`,
-            level: 'error',
-            req,
-          }
-          log(options)
-          return showCommonPage(req, res, 'notFound', pageName)
-        }
-
-        try {
-          const response = await fetchSinglePage({
-            req,
-            pageName,
-            category: ABOUT_PAGE,
-          })
-          const pageContent = await transformSinglePage(response)
-
-          // save SSR fetch page contents to redux store
-          const payload = transformPageActionPayload(pageName, pageContent)
-          const action = updateSinglePage(payload)
-          store.dispatch(action)
-
-          const options: logOption = {
-            category: 'page',
-            message: `dumpaccess to /${pageName}`,
-            level: 'info',
-            req,
-          }
-          log(options)
-          return {
-            props: {
-              pageName,
-            },
-          }
-        } catch (err) {
-          const options: logOption = {
-            category: ABOUT_PAGE,
-            message: err,
-            level: 'error',
-            req,
-          }
-          log(options)
-          return showCommonPage(req, res, 'error', pageName)
-        }
-      },
-      timeout,
-      (duration) => {
-        const options: logOption = {
-          category: ABOUT_PAGE,
-          message: `page processing timeout | duration: ${duration} ms`,
-          level: 'warn',
-          req,
-        }
-        log(options)
-        return showCommonPage(req, res, 'error', pageName)
-      },
-      ABOUT_PAGE
-    )
-    return props
-  })
-
-const AboutPage = ({ hasError, pageName }) => {
-  const pageState = useAppSelector((state) => state.page)
-  // disable links from notion table.
-  useRemoveLinks({
-    selector: '.notion-table a.notion-page-link',
-    condition: () => true,
-  })
-
-  if (hasError) {
-    return <Error statusCode={500} title="This page is broken" />
-  }
-
-  const blockId: string = get(notion, ['pages', pageName, 'pageId'])
-  const content: any = get(pageState, [pageName])
-  const previewImagesEnabled: boolean = get(notion, ['previewImages', 'enable'])
-
-  // hack to temporarily fix "cannot assign type to read-only object" issue in react-notion-x
-  const recordMap = cloneDeep(content)
-
-  return (
-    <div
-      id="notion-about-page"
-      data-namespace={pageName}
-      className="mx-auto my-0 flex max-w-1100 flex-grow flex-row flex-nowrap px-5 py-0 pt-24 lg:pt-12"
-    >
-      <NotionRenderer
-        blockId={blockId}
-        fullPage={false}
-        recordMap={recordMap}
-        components={NotionComponentMap}
-        mapPageUrl={mapNotionPageLinkUrl.bind(this, pageName, recordMap)}
-        previewImages={previewImagesEnabled}
-        showCollectionViewDropdown={false}
-      />
-    </div>
-  )
-}
-
-export default AboutPage
diff --git a/src/pages/api/posts.ts b/src/pages/api/posts.ts
deleted file mode 100644
index f6f50966..00000000
--- a/src/pages/api/posts.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import createError from 'http-errors'
-import get from 'lodash/get'
-import set from 'lodash/set'
-import log from '../../libs/server/log'
-import {
-  getNotionPostsFromTable,
-  getNotionPreviewImages,
-} from '../../libs/server/notion'
-import {
-  getCategory,
-  validateRequest,
-  setAPICacheHeaders,
-} from '../../libs/server/api'
-import { notion } from '../../../site.config'
-
-const route = '/posts'
-const methods = ['GET']
-const querySchema = {
-  type: 'object',
-  additionalProperties: false,
-  properties: {
-    index: {
-      type: 'string',
-      pattern: '^[0-9]+$',
-    },
-    pageName: {
-      enum: Object.keys(notion.pages),
-      type: 'string',
-    },
-    count: {
-      type: 'string',
-      pattern: '^[0-9]+$',
-    },
-  },
-  required: ['count', 'index', 'pageName'],
-}
-
-const handler = async (req: NextApiRequest, res: NextApiResponse) => {
-  try {
-    const category = getCategory(route)
-    validateRequest(req, { querySchema, route, methods })
-
-    const pageName = req.query?.pageName as string
-    const pageId = get(notion, ['pages', pageName, 'pageId'])
-    const collectionViewId = get(notion, [
-      'pages',
-      pageName,
-      'collectionViewId',
-    ])
-    const pageEnabled = get(notion, ['pages', pageName, 'enabled'])
-    const pageType = get(notion, ['pages', pageName, 'type'])
-
-    if (!pageEnabled || pageType !== 'stream') {
-      log({
-        category,
-        message: `posts data not found because this page is disabled \nquery params = ${JSON.stringify(
-          req.query
-        )}`,
-        level: 'warn',
-        req,
-      })
-      throw createError(404)
-    }
-    if (!pageId || !collectionViewId) {
-      log({
-        category,
-        message: `posts data not found because some required configs are missing \nquery params = ${JSON.stringify(
-          req.query
-        )}`,
-        level: 'warn',
-        req,
-      })
-      throw createError(404)
-    }
-
-    const index: any = req.query?.index
-    const count: any = req.query?.count
-    const limit = Number.parseInt(index) + Number.parseInt(count)
-    if (isNaN(limit) || !Number.isInteger(limit)) {
-      log({
-        category,
-        message: `invalid index or count, query params: ${JSON.stringify(
-          req.query
-        )}`,
-        level: 'warn',
-        req,
-      })
-      throw createError(400)
-    }
-
-    // fetch notion post data
-    log({
-      category,
-      message: `dumpaccess, query params: ${JSON.stringify(req.query)}`,
-      req,
-    })
-    const data = await getNotionPostsFromTable({
-      pageId,
-      collectionViewId,
-      options: { limit },
-    })
-
-    if (get(notion, ['previewImages', 'enable'])) {
-      const previewImageMap = await getNotionPreviewImages(data.recordMap)
-      set(data, ['recordMap', 'preview_images'], previewImageMap)
-    }
-
-    const currentIndex =
-      get(
-        data,
-        ['result', 'reducerResults', 'collection_group_results', 'blockIds'],
-        []
-      ).length - 1
-    const currentTotal = get(
-      data,
-      ['result', 'reducerResults', 'collection_group_results', 'total'],
-      0
-    )
-    set(
-      data,
-      ['result', 'reducerResults', 'collection_group_results', 'index'],
-      currentIndex
-    )
-    set(
-      data,
-      ['result', 'reducerResults', 'collection_group_results', 'hasNext'],
-      currentIndex + 1 < currentTotal
-    )
-    setAPICacheHeaders(res)
-    res.status(200).json(data)
-  } catch (err) {
-    const statusCode = err.status || 500
-    res.status(statusCode).send(err.message)
-  }
-}
-
-export default handler
diff --git a/src/styles/notion.css b/src/styles/notion.css
index e10ce3a9..cdeb6ff9 100644
--- a/src/styles/notion.css
+++ b/src/styles/notion.css
@@ -69,56 +69,56 @@
 }
 
 /**
-  * for common notion list page: #app #notion-list-page ...
+  * for common notion list page: #app #notion-article-list-page ...
   */
-#app #notion-list-page .notion-page-title-text {
+#app #notion-article-list-page .notion-page-title-text {
   @apply whitespace-normal text-2xl text-lavender-purple-300;
 }
 
-#app #notion-list-page .notion-gallery-grid {
+#app #notion-article-list-page .notion-gallery-grid {
   @apply block grid-cols-none border-0;
 }
 
-#app #notion-list-page .notion-collection-card {
+#app #notion-article-list-page .notion-collection-card {
   @apply mb-5 border-b border-gray-300 pb-4 shadow-none last:mb-0 last:border-0;
 }
 
-#app #notion-list-page .notion-collection-card-property {
+#app #notion-article-list-page .notion-collection-card-property {
   @apply text-sm;
 }
 
-#app #notion-list-page .notion-collection-card-cover {
+#app #notion-article-list-page .notion-collection-card-cover {
   @apply border-0;
 }
 
-#app #notion-list-page .notion-collection-card-cover img {
+#app #notion-article-list-page .notion-collection-card-cover img {
   @apply rounded-md;
 }
 
-#app #notion-list-page .notion-page-icon-inline {
+#app #notion-article-list-page .notion-page-icon-inline {
   @apply hidden; /* hide page title icon */
 }
 
 /**
- * for common notion single page: #app #notion-single-page ...
+ * for common notion single page: #app #notion-article-detail-page ...
  */
-#app #notion-single-page .notion-collection {
+#app #notion-article-detail-page .notion-collection {
   @apply w-full;
 }
 
-#app #notion-single-page .notion-collection .notion-table {
+#app #notion-article-detail-page .notion-collection .notion-table {
   width: 100% !important;
 }
 
-#app #notion-single-page .notion-collection .notion-table-view {
+#app #notion-article-detail-page .notion-collection .notion-table-view {
   padding: 20px !important;
 }
 
-#app #notion-single-page .notion-code {
+#app #notion-article-detail-page .notion-code {
   overflow: initial;
 }
 
-#app #notion-single-page .notion-code > code {
+#app #notion-article-detail-page .notion-code > code {
   display: block;
   overflow-x: scroll;
   overflow-y: visible;
@@ -130,18 +130,18 @@
   https://github.com/NotionX/react-notion-x/blob/ad7f5f10f3ca88bd43f5fd5f9e07b6a669c2c1bb/packages/notion-types/src/core.ts#L40-L59
  */
 #app
-  #notion-single-page
+  #notion-article-detail-page
   .notion-collection-page-properties
   .notion-collection-row-value {
   @apply p-0;
 }
 
 #app
-  #notion-single-page
+  #notion-article-detail-page
   .notion-collection-page-properties
   .notion-collection-column-title,
 #app
-  #notion-single-page
+  #notion-article-detail-page
   .notion-collection-page-properties
   .notion-collection-row-value
   > span:not(.notion-property-select, .notion-property-multi_select) {
@@ -149,7 +149,7 @@
 }
 
 #app
-  #notion-single-page
+  #notion-article-detail-page
   .notion-collection-page-properties
   .notion-collection-row {
   @apply m-0 border-0;
diff --git a/tailwind.config.js b/tailwind.config.js
index 92b10cbd..3410eeb3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,9 @@
 module.exports = {
-  content: ['./src/pages/**/*.tsx', './src/components/**/*.tsx'],
+  content: [
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
   important: '#app',
   theme: {
     extend: {
diff --git a/tests/e2e/libs/locator.ts b/tests/e2e/libs/locator.ts
index 1c2e76c0..5261b6ac 100644
--- a/tests/e2e/libs/locator.ts
+++ b/tests/e2e/libs/locator.ts
@@ -2,7 +2,7 @@ export default {
   pageTitle: 'title',
   meta: {
     description: 'meta[name="description"]',
-    ogTitle: 'meta[name="og:title"]',
+    ogTitle: 'meta[property="og:title"]',
     ogImage: 'meta[property="og:image"]',
   },
   pages: {
@@ -12,24 +12,24 @@ export default {
     },
     article: {
       navigationMenu:
-        '#notion-list-page[data-namespace="article"] [data-testid="navigation-menu"]',
-      notionWrapper: '#notion-list-page[data-namespace="article"]',
+        '#notion-article-list-page[data-namespace="article"] [data-testid="navigation-menu"]',
+      notionWrapper: '#notion-article-list-page[data-namespace="article"]',
       notionContent:
-        '#notion-list-page[data-namespace="article"] > main.notion-page',
+        '#notion-article-list-page[data-namespace="article"] > main.notion-page',
     },
     coding: {
       navigationMenu:
-        '#notion-list-page[data-namespace="coding"] [data-testid="navigation-menu"]',
-      notionWrapper: '#notion-list-page[data-namespace="coding"]',
+        '#notion-article-list-page[data-namespace="coding"] [data-testid="navigation-menu"]',
+      notionWrapper: '#notion-article-list-page[data-namespace="coding"]',
       notionContent:
-        '#notion-list-page[data-namespace="coding"] > main.notion-page',
+        '#notion-article-list-page[data-namespace="coding"] > main.notion-page',
     },
     music: {
       navigationMenu:
-        '#notion-list-page[data-namespace="music"] [data-testid="navigation-menu"]',
-      notionWrapper: '#notion-list-page[data-namespace="music"]',
+        '#notion-article-list-page[data-namespace="music"] [data-testid="navigation-menu"]',
+      notionWrapper: '#notion-article-list-page[data-namespace="music"]',
       notionContent:
-        '#notion-list-page[data-namespace="music"] > main.notion-page',
+        '#notion-article-list-page[data-namespace="music"] > main.notion-page',
     },
   },
 }
diff --git a/tests/e2e/pages/notion-article-list.spec.ts b/tests/e2e/pages/notion-article-list.spec.ts
index d3d9e2fb..08e433bf 100644
--- a/tests/e2e/pages/notion-article-list.spec.ts
+++ b/tests/e2e/pages/notion-article-list.spec.ts
@@ -68,7 +68,7 @@ notionPages.forEach((pageName) => {
       page,
     }) => {
       await page.goto(pagePath)
-      await page.waitForTimeout(1500) // wait for layout render script execution
+      await page.waitForTimeout(3000) // wait for layout render script execution
       await expect(page).toHaveScreenshot(
         `${pageName}-screenshot.png`,
         screenshotOption
diff --git a/tests/e2e/pages/notion-single.spec.ts b/tests/e2e/pages/notion-single.spec.ts
index 993bd031..8e5d3414 100644
--- a/tests/e2e/pages/notion-single.spec.ts
+++ b/tests/e2e/pages/notion-single.spec.ts
@@ -65,7 +65,7 @@ notionPages.forEach((pageName) => {
       page,
     }) => {
       await page.goto(pagePath)
-      await page.waitForTimeout(1500) // wait for layout render script execution
+      await page.waitForTimeout(3000) // wait for layout render script execution
       await expect(page).toHaveScreenshot(
         `${pageName}-screenshot.png`,
         screenshotOption
diff --git a/tests/e2e/pages/static.spec.ts b/tests/e2e/pages/static.spec.ts
index 1c06736d..27c8e5ce 100644
--- a/tests/e2e/pages/static.spec.ts
+++ b/tests/e2e/pages/static.spec.ts
@@ -49,7 +49,7 @@ staticPages.forEach((pageName) => {
       page,
     }) => {
       await page.goto(pagePath)
-      await page.waitForTimeout(1500) // wait for layout render script execution
+      await page.waitForTimeout(3000) // wait for layout render script execution
       await expect(page).toHaveScreenshot(
         `${pageName}-screenshot.png`,
         screenshotOption
diff --git a/tsconfig.json b/tsconfig.json
index 5cf1369f..8c81273e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,8 +17,20 @@
     "paths": {
       "*": ["types/*"]
     },
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
   },
   "exclude": ["node_modules", "**/__mocks__", "**/__tests__", "tests/**/*"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/libs/constant.js"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "src/libs/constant.js",
+    ".next/types/**/*.ts"
+  ]
 }
diff --git a/types/index.d.ts b/types/index.d.ts
index 51f4aef5..5cf957a7 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -12,7 +12,7 @@ export type logLevel = 'debug' | 'info' | 'warn' | 'error'
 
 export interface logOption {
   category: string
-  message: string | object
+  message: string | object | undefined | null
   level?: logLevel
   req?: null | GetServerSidePropsRequest | any
 }