Migrate from pages router to app router (#13)

* style: run prettier * build: update Next.js from pages router to app router for better SEO, LCP and other needed things for the app BREAKING CHANGE: update Next.js to v14, React DOM and React to the latest and much deps were updated even for fixes or SSR paradigm * fix: add use client directive and other fixes
allbertuu · Mar 5, 2024 · bd7b887 · bd7b887
1 parent 0857b64
commit bd7b887
Show file tree

Hide file tree

Showing 39 changed files with 421 additions and 307 deletions.
diff --git a/README.md b/README.md
@@ -42,7 +42,7 @@ Rode o servidor
 
 ## Stack utilizada ⚙
 
--   Next.js
+-   Next.js App Router
 -   React.js
 -   JavaScript/TypeScript
 -   HTML/CSS
@@ -51,7 +51,7 @@ Rode o servidor
 -   react-markdown
 -   Axios
 -   Radix UI
--   phosphor-react
+-   Phosphor Icons / React
 -   date-fns
 -   GitHub Actions (Pipelines CI)
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,11 +12,11 @@
     "lint:check": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
+    "@phosphor-icons/react": "^2.0.15",
     "@radix-ui/react-tooltip": "^1.0.2",
     "axios": "^1.2.2",
     "date-fns": "^2.29.3",
     "next": "^14.1.2",
-    "phosphor-react": "^1.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "8.0.5",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,63 @@
+import { PostsProvider } from '@/contexts/PostsContext';
+import { ToastProvider } from '@/contexts/ToastProvider.context';
+import '@/styles/globals.css';
+import '@/styles/hljs.css';
+import { Metadata } from 'next';
+import {
+  Nunito_Sans as NunitoSans,
+  Titillium_Web as TitilliumWeb,
+} from 'next/font/google';
+
+export const metadata: Metadata = {
+  title: {
+    template: '%s | Blog do Alberto',
+    default: 'Blog do Alberto | Onde você experimenta minha mente',
+  },
+  description:
+    'Aqui você encontra de (quase) tudo, especialmente tecnologia 👨🏽‍💻',
+  generator: 'Next.js',
+  applicationName: 'Blog do Alberto',
+  keywords:
+    'blog, frontend, desenvolvedor, developer, programador, alberto santos, react, javascript, web development, desenvolvimento web',
+  authors: [{ name: 'Alberto', url: 'https://www.albertosantos.dev' }],
+  creator: 'Alberto',
+  publisher: 'Vercel',
+  robots: {
+    index: true,
+    follow: true,
+    nocache: true,
+    googleBot: {
+      index: true,
+      follow: false,
+    },
+  },
+  category: 'technology',
+};
+
+const nunitoSans = NunitoSans({
+  subsets: ['latin'],
+  weight: ['400', '600', '700'],
+});
+
+const titillium = TitilliumWeb({
+  subsets: ['latin'],
+  weight: ['400', '600', '700'],
+  variable: '--font-titillium',
+});
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="pt">
+      <body
+        className={`${titillium.variable} ${nunitoSans.className} bg-blue-700`}
+      >
+        <ToastProvider />
+        <PostsProvider>{children}</PostsProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/src/pages/index.tsx → src/app/page.tsx b/src/pages/index.tsx → src/app/page.tsx
@@ -1,20 +1,11 @@
-import { GitHubCard } from '@components/github';
-import {
-  BlogBanner,
-  LogoBrandContainer,
-  SearchInput,
-  TotalPosts,
-} from '@components/index';
-import { PostsSection } from '@components/PostsSection';
-import Head from 'next/head';
+import { BlogBanner, LogoBrandContainer, SearchInput } from '@/components';
+import { Posts } from '@/components/Posts';
+import { TotalPosts } from '@/components/TotalPosts';
+import { GitHubCard } from '@/components/github';
 
-const Home = () => {
+export default async function Page() {
   return (
     <div>
-      <Head>
-        <title>Blog do Alberto | Onde você experimenta minha mente</title>
-      </Head>
-
       <BlogBanner />
 
       <main className="mx-auto w-full max-w-4xl px-6 pb-40">
@@ -31,10 +22,8 @@ const Home = () => {
 
         <SearchInput className="mb-12 w-full" />
 
-        <PostsSection />
+        <Posts />
       </main>
     </div>
   );
-};
-
-export default Home;
+}
diff --git a/src/app/posts/[...postTitle]/page.tsx b/src/app/posts/[...postTitle]/page.tsx
@@ -0,0 +1,17 @@
+import { BlogBanner, LogoBrandContainer } from '@/components';
+import { PostBody } from '@/components/PostBody';
+import { PostHeader } from '@/components/PostHeader';
+
+export default function Page() {
+  return (
+    <div>
+      <BlogBanner />
+
+      <main className="mx-auto w-full max-w-4xl px-6 pb-40">
+        <LogoBrandContainer />
+        <PostHeader />
+        <PostBody />
+      </main>
+    </div>
+  );
+}
diff --git a/src/assets/imgs/logo-albertodeveloper.svg → src/assets/imgs/logo-portfolio-website.svg b/src/assets/imgs/logo-albertodeveloper.svg → src/assets/imgs/logo-portfolio-website.svg
diff --git a/src/components/BlogBanner/index.tsx b/src/components/BlogBanner/index.tsx
@@ -1,14 +1,13 @@
-import IntroBackgroundImage from '@imgs/intro-background.png';
+import IntroBackgroundImage from '@/assets/imgs/intro-background.png';
 import Image from 'next/image';
 
 const BlogBanner: React.FC = () => {
   return (
     <Image
       src={IntroBackgroundImage}
-      alt="Banner Blog do Alberto"
+      alt="Fundo azul escuro com gradiente muito leve para o branco, com detalhes cinza claro e vermelho claro de barrinhas"
       className="absolute left-0 right-0 top-0 -z-10 h-[18.5rem] w-full object-cover"
-      width={1440}
-      height={296}
+      placeholder="blur"
     />
   );
 };

diff --git a/src/components/LoadingMessage/index.tsx b/src/components/LoadingMessage/index.tsx
@@ -1,14 +1,15 @@
-import classNames from '@utils/classNames';
-import { SpinnerGap as SpinnerGapIcon } from 'phosphor-react';
-import { FunctionComponent } from 'react';
+'use client';
+
+import classNames from '@/utils/classNames';
+import { SpinnerGap as SpinnerGapIcon } from '@phosphor-icons/react/dist/ssr';
 import { LoadingMessageProps } from './types';
 
 /**
  * Renderiza uma mensagem de carregamento com um ícone de carregamento.
  *
  * @param message Mensagem de carregamento. Padrão: 'Carregando, aguarde...'
  * */
-const LoadingMessage: FunctionComponent<LoadingMessageProps> = ({
+const LoadingMessage: React.FC<LoadingMessageProps> = ({
   message,
   ...props
 }) => {

diff --git a/src/components/LogoBrandContainer/index.tsx b/src/components/LogoBrandContainer/index.tsx
@@ -1,12 +1,12 @@
-import LogoAlbertoDeveloperImage from '@imgs/logo-albertodeveloper.svg';
+import LogoPortfolioWebsiteImage from '@/assets/imgs/logo-portfolio-website.svg';
 import Image from 'next/image';
 
 const LogoBrandContainer: React.FC = () => {
   return (
     <div className="relative mb-10 mt-14 flex flex-col items-center justify-center gap-1">
       <Image
-        src={LogoAlbertoDeveloperImage}
-        alt="Logotipo Website albertodeveloper.com"
+        src={LogoPortfolioWebsiteImage}
+        alt="Logotipo Website albertosantos.dev"
       />
 
       <h1 className="font-titillium text-4xl font-bold text-blue-50">

diff --git a/src/components/PostBody/index.tsx b/src/components/PostBody/index.tsx
@@ -1,7 +1,9 @@
-import { LoadingMessage } from '@components/index';
-import { Markdown } from '@components/lib/Markdown';
-import { GitHubIssueExtended, fetchIssue } from '@services/github.api';
-import { useRouter } from 'next/router';
+'use client';
+
+import { LoadingMessage } from '@/components/index';
+import { Markdown } from '@/components/lib/Markdown';
+import { GitHubIssueExtended, fetchIssue } from '@/services/github.api';
+import { usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 
@@ -13,14 +15,11 @@ export const PostBody: React.FC = () => {
 
   const [post, setPost] = useState<GitHubIssueExtended | null>(null);
   const [loading, setLoading] = useState(true);
-  const router = useRouter();
+  const pathname = usePathname();
 
   useEffect(() => {
     const handleFetchIssue = async () => {
-      const query = router.query.postTitle;
-      if (!query) return;
-
-      const issueNumber = query[1];
+      const issueNumber = pathname.split('/')[3];
 
       try {
         const data = await fetchIssue(issueNumber);
@@ -39,7 +38,7 @@ export const PostBody: React.FC = () => {
     };
 
     handleFetchIssue();
-  }, [router.query.postTitle]);
+  }, [pathname]);
 
   return (
     <div className="py-8 sm:px-10">

diff --git a/src/components/PostHeader/index.tsx b/src/components/PostHeader/index.tsx
@@ -1,15 +1,17 @@
-import { GitHubInfo, GitHubInfoList } from '@components/github';
-import { LoadingMessage } from '@components/index';
-import { Link } from '@components/ui/index';
-import { GitHubIssueExtended, fetchIssue } from '@services/github.api';
-import formatDateFromDateToNow from '@utils/formatDateFromDateToNow';
-import { useRouter } from 'next/router';
+'use client';
+
+import { GitHubInfo, GitHubInfoList } from '@/components/github';
+import { LoadingMessage } from '@/components/index';
+import { ExternalLink } from '@/components/ui/index';
+import { GitHubIssueExtended, fetchIssue } from '@/services/github.api';
+import formatDateFromDateToNow from '@/utils/formatDateFromDateToNow';
 import {
   Calendar as CalendarIcon,
   CaretLeft as CaretLeftIcon,
   ChatCircleDots as ChatCircleDotsIcon,
   Timer as TimerIcon,
-} from 'phosphor-react';
+} from '@phosphor-icons/react/dist/ssr';
+import { usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import readingTime from 'reading-time';
@@ -20,14 +22,11 @@ import readingTime from 'reading-time';
 export const PostHeader: React.FC = () => {
   const [post, setPost] = useState<GitHubIssueExtended | null>(null);
   const [loading, setLoading] = useState(true);
-  const router = useRouter();
+  const pathname = usePathname();
 
   useEffect(() => {
     const handleFetchIssue = async () => {
-      const query = router.query.postTitle;
-      if (!query) return;
-
-      const issueNumber = query[1];
+      const issueNumber = pathname.split('/')[3];
 
       try {
         const data = await fetchIssue(issueNumber);
@@ -46,12 +45,7 @@ export const PostHeader: React.FC = () => {
     };
 
     handleFetchIssue();
-  }, [router.query.postTitle]);
-
-  /**
-   * Retorna para a página anterior na history do navegador.
-   */
-  const goBack = () => router.back();
+  }, [pathname]);
 
   const { minutes } = readingTime(post?.body || '');
   const readingTimeInMinutes = Math.ceil(minutes);
@@ -61,7 +55,7 @@ export const PostHeader: React.FC = () => {
       {post && (
         <>
           <div className="flex flex-wrap justify-between gap-2">
-            <Link
+            <ExternalLink
               showIcon
               iconSide="left"
               icon={
@@ -71,15 +65,15 @@ export const PostHeader: React.FC = () => {
                   className="-mr-1 -mt-1"
                 />
               }
-              onClick={goBack}
+              href="/"
               target="_self"
             >
-              Voltar
-            </Link>
+              Tela inicial
+            </ExternalLink>
 
-            <Link showIcon href={post.html_url}>
+            <ExternalLink showIcon href={post.html_url}>
               Comente ou reaja aqui 👍
-            </Link>
+            </ExternalLink>
           </div>
 
           <h1 className="mb-2 mt-5 break-words text-xl font-bold sm:text-2xl">