NextJs

⌘K
  2. Home
  4. NextJs
  6. পারফরম্যান্স অপটিমাইজেশন

পারফরম্যান্স অপটিমাইজেশন

Thought for 1 second### Next.js ওয়েবসাইট অপটিমাইজেশন এবং SEO গাইড

আপনার Next.js ওয়েবসাইট তৈরি করার পর, এটিকে অপটিমাইজ করা এবং সার্চ ইঞ্জিনে ভালো র‍্যাঙ্কিং পাওয়ার জন্য SEO কনফিগারেশন করা খুবই গুরুত্বপূর্ণ। এই টিউটোরিয়ালে আমরা ধাপে ধাপে Next.js ওয়েবসাইট অপটিমাইজেশন এবং SEO কনফিগারেশন সম্পর্কে আলোচনা করব।

পার্ট ১: পারফরম্যান্স অপটিমাইজেশন

১.১: ইমেজ অপটিমাইজেশন

Next.js এর বিল্ট-ইন Image কম্পোনেন্ট ব্যবহার করে ইমেজ অপটিমাইজেশন করা যায়। এটি ইমেজের সাইজ কমায়, লেজি লোডিং করে এবং ডিভাইস অনুযায়ী রেসপন্সিভ ইমেজ সার্ভ করে।

// আগের কোড
<img src="/images/hero.jpg" alt="Hero Image" className="w-full h-auto" />

// অপটিমাইজড কোড
import Image from 'next/image'

<Image 
  src="/images/hero.jpg" 
  alt="Hero Image" 
  width={1200} 
  height={600} 
  priority={true} // হিরো ইমেজের জন্য priority=true দিন
  className="w-full h-auto"
/>

অপটিমাইজেশন টিপস:

  1. priority অ্যাট্রিবিউট ব্যবহার করুন: ফোল্ড-এর উপরে থাকা গুরুত্বপূর্ণ ইমেজের জন্য priority={true} ব্যবহার করুন। এটি LCP (Largest Contentful Paint) উন্নত করবে।
  2. sizes অ্যাট্রিবিউট ব্যবহার করুন: ব্রাউজারকে জানান ইমেজ কত স্পেস নিবে:
<Image 
  src="/images/hero.jpg" 
  alt="Hero Image" 
  width={1200} 
  height={600} 
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" 
/>
  1. placeholder ব্যবহার করুন: ইমেজ লোড হওয়ার আগে একটি ব্লার প্লেসহোল্ডার দেখাতে:
<Image 
  src="/images/hero.jpg" 
  alt="Hero Image" 
  width={1200} 
  height={600} 
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
/>

১.২: JavaScript অপটিমাইজেশন

Next.js এর বিল্ট-ইন কম্পোনেন্ট এবং ফাংশন ব্যবহার করে JavaScript অপটিমাইজেশন করা যায়।

ডাইনামিক ইম্পোর্ট

বড় কম্পোনেন্ট বা লাইব্রেরি ডাইনামিক্যালি ইম্পোর্ট করুন:

import dynamic from 'next/dynamic'

// ডাইনামিক ইম্পোর্ট
const HeavyComponent = dynamic(() => import('@/components/HeavyComponent'), {
  loading: () => <p>লোড হচ্ছে...</p>,
  ssr: false // ক্লায়েন্ট-সাইড কম্পোনেন্টের জন্য
})

export default function HomePage() {
  return (
    <div>
      <HeavyComponent />
    </div>
  )
}

কোড স্প্লিটিং

Next.js অটোমেটিক্যালি পেজ-বেসড কোড স্প্লিটিং করে। আপনি আরও গ্র্যানুলার কোড স্প্লিটিং করতে পারেন:

// কম্পোনেন্ট লেভেল কোড স্প্লিটিং
const ContactForm = dynamic(() => import('@/components/ContactForm'))

১.৩: CSS অপটিমাইজেশন

CSS মডিউল ব্যবহার করুন

CSS মডিউল ব্যবহার করে স্কোপড CSS লিখুন:

// Button.module.css
.button {
  background-color: blue;
  color: white;
  padding: 10px 15px;
}

// Button.tsx
import styles from './Button.module.css'

export default function Button({ children }) {
  return (
    <button className={styles.button}>
      {children}
    </button>
  )
}

Tailwind CSS অপটিমাইজেশন

Tailwind CSS ব্যবহার করলে, অব্যবহৃত CSS ক্লাস রিমুভ করার জন্য tailwind.config.js ফাইলে purge অপশন কনফিগার করুন:

// tailwind.config.js
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

১.৪: ফন্ট অপটিমাইজেশন

Next.js 13+ এ next/font ব্যবহার করে ফন্ট অপটিমাইজেশন করা যায়:

// app/layout.tsx
import { Inter } from 'next/font/google'

// ফন্ট লোড করা
const inter = Inter({ 
  subsets: ['latin'],
  display: 'swap',
  // বাংলা ফন্টের জন্য
  // subsets: ['bengali']
})

export default function RootLayout({ children }) {
  return (
    <html lang="bn" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

বাংলা ফন্টের জন্য:

import { Noto_Sans_Bengali } from 'next/font/google'

const bengaliFont = Noto_Sans_Bengali({ 
  subsets: ['bengali'],
  weight: ['400', '500', '700'],
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="bn" className={bengaliFont.className}>
      <body>{children}</body>
    </html>
  )
}

১.৫: API রাউট অপটিমাইজেশন

API রাউট অপটিমাইজেশনের জন্য:

// app/api/contact/route.ts
import { NextResponse } from 'next/server'

export async function POST(request: Request) {
  try {
    const data = await request.json()

    // ডাটা ভ্যালিডেশন
    if (!data.name || !data.email || !data.message) {
      return NextResponse.json(
        { error: 'সব প্রয়োজনীয় ফিল্ড পূরণ করুন' },
        { status: 400 }
      )
    }

    // ডাটা প্রসেসিং লজিক
    // ...

    return NextResponse.json({ success: true })
  } catch (error) {
    return NextResponse.json(
      { error: 'সার্ভার এরর' },
      { status: 500 }
    )
  }
}

১.৬: কেশিং স্ট্র্যাটেজি

Next.js App Router এ ডাটা ফেচিং এবং কেশিং:

// app/blog/page.tsx
async function getBlogPosts() {
  // ডিফল্টভাবে এই ডাটা ফেচিং রিকোয়েস্ট কেশ হবে
  const res = await fetch('https://api.example.com/posts')

  if (!res.ok) {
    throw new Error('ডাটা লোড করতে সমস্যা হয়েছে')
  }

  return res.json()
}

export default async function BlogPage() {
  const posts = await getBlogPosts()

  return (
    <div>
      {/* পোস্ট রেন্ডারিং লজিক */}
    </div>
  )
}

কেশিং কন্ট্রোল করতে:

// রিভ্যালিডেশন টাইম সেট করা (ISR)
const res = await fetch('https://api.example.com/posts', { next: { revalidate: 3600 } }) // 1 ঘন্টা পর রিভ্যালিডেট

// কেশিং ডিজেবল করা
const res = await fetch('https://api.example.com/posts', { cache: 'no-store' })

পার্ট ২: SEO অপটিমাইজেশন

২.১: মেটাডাটা কনফিগারেশন

Next.js App Router এ মেটাডাটা কনফিগার করার জন্য:

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    default: 'আমার ওয়েবসাইট',
    template: '%s | আমার ওয়েবসাইট',
  },
  description: 'আমার ওয়েবসাইটের বিবরণ',
  keywords: ['Next.js', 'React', 'JavaScript', 'ওয়েব ডেভেলপমেন্ট'],
  authors: [{ name: 'আপনার নাম' }],
  creator: 'আপনার নাম',
  publisher: 'আপনার কোম্পানি',
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
}

export default function RootLayout({ children }) {
  return (
    <html lang="bn">
      <body>{children}</body>
    </html>
  )
}

পেজ-স্পেসিফিক মেটাডাটা:

// app/about/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'আমাদের সম্পর্কে',
  description: 'আমাদের কোম্পানি সম্পর্কে জানুন',
}

export default function AboutPage() {
  return (
    <div>
      {/* পেজ কন্টেন্ট */}
    </div>
  )
}

২.২: ডাইনামিক মেটাডাটা

ডাইনামিক পেজের জন্য ডাইনামিক মেটাডাটা:

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'

// ডাইনামিক মেটাডাটা জেনারেট করা
export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  // ডাটা ফেচ করা
  const post = await getPostBySlug(params.slug)

  if (!post) {
    return {
      title: 'পোস্ট পাওয়া যায়নি',
    }
  }

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [
        {
          url: post.featuredImage || '/images/default-og.jpg',
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
    },
  }
}

export default async function BlogPostPage({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug)

  if (!post) {
    return <div>পোস্ট পাওয়া যায়নি</div>
  }

  return (
    <div>
      {/* পোস্ট কন্টেন্ট */}
    </div>
  )
}

২.৩: সোশ্যাল মিডিয়া মেটাডাটা (Open Graph)

Open Graph এবং Twitter কার্ড মেটাডাটা:

// app/layout.tsx
export const metadata: Metadata = {
  // ... অন্যান্য মেটাডাটা

  openGraph: {
    type: 'website',
    locale: 'bn_BD',
    url: 'https://www.yourwebsite.com',
    siteName: 'আপনার ওয়েবসাইট',
    images: [
      {
        url: '/images/og-image.jpg',
        width: 1200,
        height: 630,
        alt: 'আপনার ওয়েবসাইট',
      },
    ],
  },

  twitter: {
    card: 'summary_large_image',
    title: 'আপনার ওয়েবসাইট',
    description: 'আপনার ওয়েবসাইটের বিবরণ',
    creator: '@yourtwitterhandle',
    images: ['/images/twitter-image.jpg'],
  },
}

২.৪: JSON-LD স্ট্রাকচারড ডাটা

স্ট্রাকচারড ডাটা যোগ করে সার্চ ইঞ্জিনকে আপনার কন্টেন্ট সম্পর্কে আরও তথ্য দিন:

// components/JsonLd.tsx
export default function JsonLd({ data }: { data: any }) {
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
    />
  )
}

// app/page.tsx
import JsonLd from '@/components/JsonLd'

export default function HomePage() {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Organization',
    name: 'আপনার কোম্পানি',
    url: 'https://www.yourwebsite.com',
    logo: 'https://www.yourwebsite.com/images/logo.png',
    contactPoint: {
      '@type': 'ContactPoint',
      telephone: '+880-1234-567890',
      contactType: 'customer service',
      availableLanguage: ['Bengali', 'English'],
    },
    sameAs: [
      'https://www.facebook.com/yourcompany',
      'https://www.twitter.com/yourcompany',
      'https://www.linkedin.com/company/yourcompany',
    ],
  }

  return (
    <>
      <JsonLd data={jsonLd} />
      <div>
        {/* পেজ কন্টেন্ট */}
      </div>
    </>
  )
}

ব্লগ পোস্টের জন্য:

// app/blog/[slug]/page.tsx
import JsonLd from '@/components/JsonLd'

export default async function BlogPostPage({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug)

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    description: post.excerpt,
    image: post.featuredImage,
    datePublished: post.date,
    dateModified: post.modifiedDate,
    author: {
      '@type': 'Person',
      name: post.author.name,
    },
    publisher: {
      '@type': 'Organization',
      name: 'আপনার কোম্পানি',
      logo: {
        '@type': 'ImageObject',
        url: 'https://www.yourwebsite.com/images/logo.png',
      },
    },
    mainEntityOfPage: {
      '@type': 'WebPage',
      '@id': `https://www.yourwebsite.com/blog/${post.slug}`,
    },
  }

  return (
    <>
      <JsonLd data={jsonLd} />
      <div>
        {/* পোস্ট কন্টেন্ট */}
      </div>
    </>
  )
}

২.৫: XML সাইটম্যাপ

সাইটম্যাপ জেনারেট করার জন্য:

// app/sitemap.ts
import { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  // ডাইনামিক পেজের ডাটা ফেচ করা
  const posts = await getAllPosts()

  // ব্লগ পোস্টের URL
  const blogUrls = posts.map((post) => ({
    url: `https://www.yourwebsite.com/blog/${post.slug}`,
    lastModified: post.modifiedDate || post.date,
    changeFrequency: 'weekly',
    priority: 0.7,
  }))

  // স্ট্যাটিক পেজের URL
  const staticUrls = [
    {
      url: 'https://www.yourwebsite.com',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1.0,
    },
    {
      url: 'https://www.yourwebsite.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    {
      url: 'https://www.yourwebsite.com/services',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    {
      url: 'https://www.yourwebsite.com/contact',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 0.5,
    },
  ]

  return [...staticUrls, ...blogUrls]
}

২.৬: রোবটস.টেক্সট

রোবটস.টেক্সট ফাইল তৈরি করা:

// app/robots.ts
import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: ['/admin/', '/private/'],
    },
    sitemap: 'https://www.yourwebsite.com/sitemap.xml',
  }
}

পার্ট ৩: অ্যাকসেসিবিলিটি অপটিমাইজেশন

৩.১: সিমান্টিক HTML ব্যবহার করুন

// খারাপ উদাহরণ
<div className="header">
  <div className="logo">Logo</div>
  <div className="nav">
    <div>Home</div>
    <div>About</div>
  </div>
</div>

// ভালো উদাহরণ
<header>
  <div className="logo">Logo</div>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

৩.২: ARIA অ্যাট্রিবিউট ব্যবহার করুন

// মোডাল কম্পোনেন্ট
<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
  aria-describedby="modal-description"
>
  <h2 id="modal-title">মোডাল টাইটেল</h2>
  <p id="modal-description">মোডাল ডেসক্রিপশন</p>
  <button aria-label="মোডাল বন্ধ করুন">X</button>
</div>

৩.৩: কীবোর্ড নেভিগেশন

// ড্রপডাউন মেনু
function Dropdown() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div>
      <button
        onClick={() => setIsOpen(!isOpen)}
        aria-haspopup="true"
        aria-expanded={isOpen}
      >
        মেনু
      </button>

      {isOpen && (
        <ul role="menu">
          <li role="menuitem" tabIndex={0}>
            <a href="/option1">অপশন ১</a>
          </li>
          <li role="menuitem" tabIndex={0}>
            <a href="/option2">অপশন ২</a>
          </li>
        </ul>
      )}
    </div>
  )
}

৩.৪: কালার কনট্রাস্ট

Tailwind CSS এ কালার কনট্রাস্ট নিশ্চিত করা:

// খারাপ কনট্রাস্ট
<button className="bg-gray-200 text-gray-400">
  সাবমিট করুন
</button>

// ভালো কনট্রাস্ট
<button className="bg-blue-600 text-white">
  সাবমিট করুন
</button>

পার্ট ৪: পারফরম্যান্স মনিটরিং এবং অ্যানালিটিক্স

৪.১: Core Web Vitals মনিটরিং

Next.js এ Core Web Vitals মনিটর করার জন্য:

// app/layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next'
import { Analytics } from '@vercel/analytics/react'

export default function RootLayout({ children }) {
  return (
    <html lang="bn">
      <body>
        {children}
        <SpeedInsights />
        <Analytics />
      </body>
    </html>
  )
}

৪.২: Google Analytics ইন্টিগ্রেশন

// components/GoogleAnalytics.tsx
'use client'

import Script from 'next/script'

export default function GoogleAnalytics({ gaId }: { gaId: string }) {
  return (
    <>
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
      />
      <Script
        id="google-analytics"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${gaId}');
          `,
        }}
      />
    </>
  )
}

// app/layout.tsx
import GoogleAnalytics from '@/components/GoogleAnalytics'

export default function RootLayout({ children }) {
  return (
    <html lang="bn">
      <body>
        {children}
        <GoogleAnalytics gaId="G-XXXXXXXXXX" />
      </body>
    </html>
  )
}

পার্ট ৫: সিকিউরিটি অপটিমাইজেশন

৫.১: Content Security Policy (CSP)

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const response = NextResponse.next()

  // CSP হেডার সেট করা
  response.headers.set(
    'Content-Security-Policy',
    "default-src 'self'; script-src 'self' 'unsafe-inline' https://www.googletagmanager.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://www.google-analytics.com; connect-src 'self' https://www.google-analytics.com;"
  )

  // অন্যান্য সিকিউরিটি হেডার
  response.headers.set('X-Frame-Options', 'DENY')
  response.headers.set('X-Content-Type-Options', 'nosniff')
  response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin')
  response.headers.set('Permissions-Policy', 'camera=(), microphone=(), geolocation=()')

  return response
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
}

৫.২: CSRF প্রটেকশন

// lib/csrf.ts
import { randomBytes } from 'crypto'
import { cookies } from 'next/headers'

export function generateCsrfToken() {
  const token = randomBytes(32).toString('hex')
  cookies().set('csrf-token', token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'strict',
  })
  return token
}

// app/api/contact/route.ts
import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'

export async function POST(request: Request) {
  const data = await request.json()
  const csrfToken = data.csrfToken
  const storedToken = cookies().get('csrf-token')?.value

  if (!csrfToken || !storedToken || csrfToken !== storedToken) {
    return NextResponse.json(
      { error: 'Invalid CSRF token' },
      { status: 403 }
    )
  }

  // ফর্ম প্রসেসিং লজিক
  // ...

  return NextResponse.json({ success: true })
}

// components/ContactForm.tsx
'use client'

import { useState, useEffect } from 'react'

export default function ContactForm() {
  const [csrfToken, setCsrfToken] = useState('')

  useEffect(() => {
    // CSRF টোকেন ফেচ করা
    fetch('/api/csrf')
      .then(res => res.json())
      .then(data => setCsrfToken(data.csrfToken))
  }, [])

  const handleSubmit = async (e) => {
    e.preventDefault()

    // ফর্ম ডাটার সাথে CSRF টোকেন পাঠানো
    const formData = new FormData(e.target)
    const data = Object.fromEntries(formData.entries())

    const response = await fetch('/api/contact', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        ...data,
        csrfToken,
      }),
    })

    // রেসপন্স হ্যান্ডলিং
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="hidden" name="csrfToken" value={csrfToken} />
      {/* অন্যান্য ফর্ম ফিল্ড */}
    </form>
  )
}

৫.৩: XSS প্রটেকশন

// components/RichText.tsx
import DOMPurify from 'isomorphic-dompurify'

export default function RichText({ content }: { content: string }) {
  // HTML স্যানিটাইজ করা
  const sanitizedContent = DOMPurify.sanitize(content)

  return <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
}

পার্ট ৬: ডেপ্লয়মেন্ট অপটিমাইজেশন

৬.১: Vercel এ ডেপ্লয় করার সময় অপটিমাইজেশন

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // ইমেজ অপটিমাইজেশন
  images: {
    domains: ['example.com', 'cdn.example.com'],
    formats: ['image/avif', 'image/webp'],
  },

  // কম্প্রেশন
  compress: true,

  // পাওয়ারড বাই ফুটার রিমুভ করা
  poweredByHeader: false,

  // ইন্টারন্যাশনালাইজেশন
  i18n: {
    locales: ['bn', 'en'],
    defaultLocale: 'bn',
  },

  // এনভায়রনমেন্ট ভেরিয়েবল
  env: {
    SITE_URL: process.env.SITE_URL,
  },

  // অ্যানালিটিক্স
  experimental: {
    webVitalsAttribution: ['CLS', 'LCP', 'FID', 'INP'],
  },
}

module.exports = nextConfig

৬.২: Vercel এনভায়রনমেন্ট ভেরিয়েবল

Vercel ড্যাশবোর্ডে এনভায়রনমেন্ট ভেরিয়েবল সেট করুন:

  1. Vercel ড্যাশবোর্ডে যান
  2. আপনার প্রজেক্ট সিলেক্ট করুন
  3. Settings > Environment Variables এ যান
  4. নিচের ভেরিয়েবলগুলো সেট করুন:
  5. SITE_URL: আপনার সাইটের URL
  6. GA_MEASUREMENT_ID: Google Analytics ID
  7. API_KEY: API কী (যদি থাকে)

৬.৩: Vercel Analytics এবং Speed Insights

Vercel Analytics এবং Speed Insights ইন্সটল করুন:

npm install @vercel/analytics @vercel/speed-insights

এরপর app/layout.tsx ফাইলে ইম্পোর্ট করুন:

import { Analytics } from '@vercel/analytics/react'
import { SpeedInsights } from '@vercel/speed-insights/next'

export default function RootLayout({ children }) {
  return (
    <html lang="bn">
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  )
}

পার্ট ৭: ইন্টারন্যাশনালাইজেশন (i18n)

৭.১: বেসিক i18n সেটআপ

npm install next-intl
// messages/bn.json
{
  "home": {
    "title": "হোম পেজ",
    "description": "আমাদের ওয়েবসাইটে স্বাগতম"
  },
  "about": {
    "title": "আমাদের সম্পর্কে",
    "description": "আমাদের কোম্পানি সম্পর্কে জানুন"
  }
}

// messages/en.json
{
  "home": {
    "title": "Home Page",
    "description": "Welcome to our website"
  },
  "about": {
    "title": "About Us",
    "description": "Learn about our company"
  }
}
// middleware.ts
import createMiddleware from 'next-intl/middleware'

export default createMiddleware({
  locales: ['bn', 'en'],
  defaultLocale: 'bn',
})

export const config = {
  matcher: ['/((?!api|_next|.*\\..*).*)'],
}
// app/[locale]/layout.tsx
import { NextIntlClientProvider } from 'next-intl'
import { notFound } from 'next/navigation'

export function generateStaticParams() {
  return [{ locale: 'bn' }, { locale: 'en' }]
}

export default async function LocaleLayout({ children, params: { locale } }) {
  let messages
  try {
    messages = (await import(`../../messages/${locale}.json`)).default
  } catch (error) {
    notFound()
  }

  return (
    <NextIntlClientProvider locale={locale} messages={messages}>
      {children}
    </NextIntlClientProvider>
  )
}
// app/[locale]/page.tsx
import { useTranslations } from 'next-intl'

export default function Home() {
  const t = useTranslations('home')

  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('description')}</p>
    </div>
  )
}

উপসংহার

এই টিউটোরিয়ালে আমরা Next.js ওয়েবসাইট অপটিমাইজেশন এবং SEO কনফিগারেশন সম্পর্কে বিস্তারিত আলোচনা করেছি। এই টেকনিকগুলো ব্যবহার করে আপনি আপনার ওয়েবসাইটের পারফরম্যান্স, SEO, অ্যাকসেসিবিলিটি এবং সিকিউরিটি উন্নত করতে পারবেন।

মনে রাখবেন, অপটিমাইজেশন একটি চলমান প্রক্রিয়া। নিয়মিত আপনার ওয়েবসাইটের পারফরম্যান্স চেক করুন এবং প্রয়োজনীয় পরিবর্তন করুন। Google Lighthouse, PageSpeed Insights, এবং Vercel Analytics ব্যবহার করে আপনার ওয়েবসাইটের পারফরম্যান্স মনিটর করুন।

আশা করি এই টিউটোরিয়াল আপনাকে Next.js ওয়েবসাইট অপটিমাইজেশন এবং SEO কনফিগারেশন সম্পর্কে ভালো ধারণা দিয়েছে। ধন্যবাদ!

Articles

How can we help?