[FEATURE] - Adiciona internacionalização

README-CONTRIBUIDOR.md

@@ -37,7 +37,10 @@ Antes de começar, certifique-se de ter instalado:
 diaum/
 ├── src/
 │   ├── app/             # Páginas e rotas (Next.js App Router)
+│   │   ├── [locale]/    # Páginas da aplicação que são localizadas
 │   ├── components/      # Componentes React reutilizáveis
+│   ├── locales/         # Textos de localização
+│   ├── i18n/            # Configurações da localização como routing e definição de linguagem
 │   ├── data/            # Dados e configurações
 │   │   ├── siteDetails.ts
 │   │   └── ...
@@ -49,7 +52,7 @@ diaum/
 
 ### Pastas Principais
 
-- **`/src/app`**: Contém as páginas e rotas do site
+- **`/src/app/[locale]`**: Contém as páginas e rotas do site
 - **`/src/components`**: Componentes React modulares e reutilizáveis
 - **`/src/data`**: Arquivos de configuração e dados do site
 - **`/public`**: Assets estáticos (imagens, ícones, etc.)

next.config.mjs

@@ -1,3 +1,7 @@
+import createNextIntlPlugin from 'next-intl/plugin'
+
+const withNextIntl = createNextIntlPlugin()
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
@@ -30,4 +34,4 @@ const nextConfig = {
   },
 }
 
-export default nextConfig
+export default withNextIntl(nextConfig)

package.json

@@ -19,6 +19,7 @@
     "clsx": "^2.1.1",
     "framer-motion": "^11.11.9",
     "next": "^14.2.13",
+    "next-intl": "^4.3.12",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0"

src/app/blog/[slug]/page.tsx → src/app/[locale]/blog/[slug]/page.tsx

@@ -1,7 +1,8 @@
 import { notFound } from 'next/navigation'
 import Image from 'next/image'
 import { fetchBySlug, fetchPageBlocks, extractBlogPost } from '@/lib/notion'
-import { NotionRenderer } from '../../../components/NotionRenderer'
+import { NotionRenderer } from '@/components/NotionRenderer'
+import { getLocale, getTranslations } from 'next-intl/server'
 
 interface BlogPostPageProps {
   params: {
@@ -16,11 +17,13 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
     notFound()
   }
 
+  const translation = await getTranslations('blog')
+  const locale = await getLocale()
   const post = extractBlogPost(page)
   const blocks = await fetchPageBlocks(page.id)
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-white mt-16">
       <div className="max-w-4xl mx-auto px-4 py-16">
         <nav className="mb-8">
           <a
@@ -35,7 +38,7 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
                 d="M15 19l-7-7 7-7"
               />
             </svg>
-            Voltar ao blog
+            {translation('labelLinks.goBackBlog')}
           </a>
         </nav>
 
@@ -69,7 +72,7 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
 
           <div className="flex items-center text-gray-600">
             <time className="text-lg">
-              {new Date(post.publishedAt).toLocaleDateString('pt-BR', {
+              {new Date(post.publishedAt).toLocaleDateString(locale, {
                 year: 'numeric',
                 month: 'long',
                 day: 'numeric',
@@ -99,11 +102,11 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
                 </div>
               )}
               <div>
-                <p className="text-sm text-gray-600 mb-1">Escrito por</p>
+                <p className="text-sm text-gray-600 mb-1">{translation('article.writtenBy')}</p>
                 <p className="text-xl font-semibold text-gray-900">{post.author}</p>
                 <p className="text-sm text-gray-500 mt-1">
-                  Publicado em{' '}
-                  {new Date(post.publishedAt).toLocaleDateString('pt-BR', {
+                  {translation('article.publishedAt')}{' '}
+                  {new Date(post.publishedAt).toLocaleDateString(locale, {
                     year: 'numeric',
                     month: 'long',
                     day: 'numeric',

src/app/blog/page.tsx → src/app/[locale]/blog/page.tsx

@@ -2,22 +2,23 @@ import Link from 'next/link'
 import Image from 'next/image'
 import { fetchPages, extractBlogPost } from '@/lib/notion'
 import { PageObjectResponse } from '@notionhq/client/build/src/api-endpoints'
+import { getTranslations } from 'next-intl/server'
 
 export default async function BlogPage() {
+  const translation = await getTranslations('blog')
+
   try {
     const response = await fetchPages()
     const posts = response.results
       .filter((page): page is PageObjectResponse => page.object === 'page')
       .map((page: PageObjectResponse) => extractBlogPost(page))
 
     return (
-      <div className="min-h-screen bg-white">
+      <div className="min-h-screen bg-white mt-10">
         <div className="max-w-4xl mx-auto px-4 py-16">
           <div className="text-center mb-16">
             <h1 className="text-4xl font-bold text-gray-900 mb-4">Blog</h1>
-            <p className="text-xl text-gray-600">
-              Artigos e insights sobre tecnologia e desenvolvimento
-            </p>
+            <p className="text-xl text-gray-600">{translation('headline')}</p>
           </div>
 
           <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
@@ -88,7 +89,7 @@ export default async function BlogPage() {
                       href={`/blog/${post.slug}`}
                       className="text-blue-600 hover:text-blue-800 font-medium"
                     >
-                      Ler mais →
+                      {translation('labelLinks.readMore')}
                     </Link>
                   </div>
                 </div>