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...)

1 files changed, 12 insertions, 7 deletions

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 = {