fix(build): handle Next.js errors and warnings during build

* extract Blog component from BlogPage (paginated) and extract Article
component from ArticlePage to avoid `Cannot read properties` errors due
to fallback route
* fix sitemap build (cjs not supported)
* fix eslint warnings (react/jsx-no-literals)
* update `start` script since I'm using standalone output
* update `postbuild` script since we need to copy public and static
files to standalone directory (Next.js does not handle it itself
because we should use a CDN...)

3 files changed, 41 insertions, 23 deletions

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 525335f..42b3de4 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -22,6 +22,7 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
       domainId={CONFIG.ackee.siteId}
       server={CONFIG.ackee.url}
       storageKey={STORAGE_KEY.ACKEE}
+      // eslint-disable-next-line react/jsx-no-literals
       tracking="full"
     >
       <MotionProvider
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index e18de75..ecff692 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -3,7 +3,7 @@ import type { ParsedUrlQuery } from 'querystring';
 import type { GetStaticPaths, GetStaticProps } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import { useCallback } from 'react';
+import { type FC, useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import {
   getLayout,
@@ -60,12 +60,8 @@ type ArticlePageProps = {
   translation: Messages;
 };
 
-/**
- * Article page.
- */
-const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({ data }) => {
+const Article: FC<Pick<ArticlePageProps, 'data'>> = ({ data }) => {
   const intl = useIntl();
-  const { isFallback } = useRouter();
   const { article, isLoading } = useArticle(data.post.slug, data.post);
   const { comments, isLoading: areCommentsLoading } = useComments({
     fallback: data.comments,
@@ -137,7 +133,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({ data }) => {
     []
   );
 
-  if (isFallback || isLoading) return <LoadingPage />;
+  if (isLoading) return <LoadingPage />;
 
   const { content, id, intro, meta, slug, title } = article;
   const {
@@ -276,6 +272,15 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({ data }) => {
   );
 };
 
+/**
+ * Article page.
+ */
+const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({ data }) => {
+  const { isFallback } = useRouter();
+
+  return isFallback ? <LoadingPage /> : <Article data={data} />;
+};
+
 ArticlePage.getLayout = (page) => getLayout(page);
 
 type PostParams = {
diff --git a/src/pages/blog/page/[number].tsx b/src/pages/blog/page/[number].tsx
index fa1123d..e524a64 100644
--- a/src/pages/blog/page/[number].tsx
+++ b/src/pages/blog/page/[number].tsx
@@ -3,7 +3,7 @@ import type { ParsedUrlQuery } from 'querystring';
 import type { GetStaticPaths, GetStaticProps } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import { useCallback } from 'react';
+import { type FC, useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import {
   getLayout,
@@ -78,23 +78,12 @@ type BlogPageProps = {
   translation: Messages;
 };
 
-/**
- * Blog index page.
- */
-const BlogPage: NextPageWithLayout<BlogPageProps> = ({
+const Blog: FC<Pick<BlogPageProps, 'data' | 'lastCursor' | 'pageNumber'>> = ({
   data,
   lastCursor,
   pageNumber,
 }) => {
-  useRedirection({
-    isReplacing: true,
-    to: ROUTES.BLOG,
-    whenPathMatches: (path) =>
-      path === `${ROUTES.BLOG}${PAGINATED_ROUTE_PREFIX}/1`,
-  });
-
   const intl = useIntl();
-  const { isFallback } = useRouter();
   const {
     articles,
     error,
@@ -256,8 +245,6 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
     [intl]
   );
 
-  if (isFallback) return <LoadingPage />;
-
   const pageUrl = `${CONFIG.url}${ROUTES.BLOG}`;
 
   return (
@@ -359,6 +346,30 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
   );
 };
 
+/**
+ * Blog index page.
+ */
+const BlogPage: NextPageWithLayout<BlogPageProps> = ({
+  data,
+  lastCursor,
+  pageNumber,
+}) => {
+  useRedirection({
+    isReplacing: true,
+    to: ROUTES.BLOG,
+    whenPathMatches: (path) =>
+      path === `${ROUTES.BLOG}${PAGINATED_ROUTE_PREFIX}/1`,
+  });
+
+  const { isFallback } = useRouter();
+
+  return isFallback ? (
+    <LoadingPage />
+  ) : (
+    <Blog data={data} lastCursor={lastCursor} pageNumber={pageNumber} />
+  );
+};
+
 BlogPage.getLayout = (page) => getLayout(page);
 
 type BlogPageParams = {
@@ -414,7 +425,8 @@ export const getStaticPaths: GetStaticPaths = async () => {
     { length: totalPages },
     (_, index) => index + 1
   );
-  const paths = pagesArray.map((number) => {
+  // We remove /blog/page/1 since it is redirected to /blog
+  const paths = pagesArray.slice(1).map((number) => {
     return { params: { number: `${number}` } };
   });