మేము Next.js మరియు MDXతో బహుభాషా AI ఎడ్యుకేషన్ ప్లాట్‌ఫారమ్‌ను ఎలా నిర్మించాము

బిల్డింగ్ AI ఎడ్యుకాడెమీ ఒక ప్రత్యేకమైన సాంకేతిక సవాలును అందించింది: ప్రపంచవ్యాప్తంగా అభ్యాసకులకు అందుబాటులో ఉండే ప్లాట్‌ఫారమ్‌ను రూపొందించండి, నిర్వహించడం సులభం మరియు మిలియన్ల మంది వినియోగదారులకు సేవ చేయడానికి తగినంత స్కేలబుల్ - అన్నీ కోడ్‌బేస్‌ను శుభ్రంగా మరియు డెవలపర్-ఫ్రెండ్‌లీగా ఉంచడం.

ఈ లోతైన డైవ్‌లో, మేము మా ప్లాట్‌ఫారమ్‌ను ఆకృతి చేసిన నిర్మాణ నిర్ణయాల ద్వారా నడుస్తాము, మా ఎంపిక Next.js 15 నుండి మేము బహుభాషా కంటెంట్‌ని git సబ్‌మాడ్యూల్స్‌తో ఎలా నిర్వహించాలి. మీరు ఎడ్యుకేషనల్ ప్లాట్‌ఫారమ్, డాక్యుమెంటేషన్ సైట్ లేదా ఏదైనా కంటెంట్-హెవీ అప్లికేషన్‌ని నిర్మిస్తున్నా, మీరు ఇక్కడ ఆచరణాత్మక అంతర్దృష్టులను కనుగొంటారు.

Next.js 15 యాప్ రూటర్ ఎందుకు? 🏗️

మేము AI ఎడ్యుకాడెమీని నిర్మించడం ప్రారంభించినప్పుడు, Next.js 14 ప్రమాణం. మేము ప్రారంభించిన సమయానికి, App రూటర్‌కు గణనీయమైన మెరుగుదలలతో Next.js 15 విడుదల చేయబడింది. అనేక అంశాలు మా లక్ష్యాలతో సంపూర్ణంగా సమలేఖనం చేయబడినందున మేము ముందుకు సాగాము:

డిఫాల్ట్‌గా సర్వర్ కాంపోనెంట్‌లు: Next.js 15 యాప్ రూటర్ డిఫాల్ట్‌గా సర్వర్ కాంపోనెంట్‌లను ఉపయోగిస్తుంది, అంటే సాధారణ ఆపరేషన్‌ల కోసం అదనపు API రూట్‌లు లేకుండా నేరుగా మా కాంపోనెంట్‌లలో డేటాను పొందవచ్చు. ఇది సంక్లిష్టతను తగ్గిస్తుంది మరియు బాక్స్ వెలుపల పనితీరును మెరుగుపరుస్తుంది.

ఇంక్రిమెంటల్ స్టాటిక్ రీజెనరేషన్ (ISR): ఎడ్యుకేషనల్ కంటెంట్ నిరంతరం మారదు, కానీ అది మారుతుంది. ISR బిల్డ్ సమయంలో పేజీలను ప్రీ-రెండర్ చేయడానికి మరియు షెడ్యూల్‌లో వాటిని మళ్లీ ధృవీకరించడానికి అనుమతిస్తుంది. దీనర్థం మా బ్లాగ్ పోస్ట్‌లు, ట్యుటోరియల్‌లు మరియు కోర్సు మెటీరియల్‌లు ఆన్-డిమాండ్ రెండరింగ్ యొక్క పనితీరు హిట్ లేకుండా ఎల్లప్పుడూ తాజాగా ఉంటాయి.

అంతర్నిర్మిత ఆప్టిమైజేషన్: ఇమేజ్ ఆప్టిమైజేషన్, ఫాంట్ లోడింగ్ మరియు కోడ్ స్ప్లిటింగ్ స్వయంచాలకంగా నిర్వహించబడతాయి. ఈ ఫీచర్‌లను రూపొందించడానికి లేదా కాన్ఫిగర్ చేయడానికి మేము సైకిల్‌లను వెచ్చించాల్సిన అవసరం లేదు - అవి పని చేస్తాయి.

ఫైల్-ఆధారిత రూటింగ్: యాప్ రూటర్ యొక్క సహజమైన ఫైల్ నిర్మాణం పేజీలు మరియు API మార్గాలు ఎక్కడ నివసిస్తున్నాయో స్పష్టంగా తెలియజేస్తుంది. కొత్త కంట్రిబ్యూటర్‌లు కోడ్‌బేస్‌లోకి వెళ్లి నిర్మాణాన్ని వెంటనే అర్థం చేసుకోవచ్చు.

// Our routing structure is intuitive and scalable
app/
├── [locale]/
│   ├── page.tsx
│   ├── programs/
│   │   ├── page.tsx
│   │   └── [slug]/
│   │       └── page.tsx
│   └── blog/
│       ├── page.tsx
│       └── [slug]/
│           └── page.tsx
├── api/
└── layout.tsx

తదుపరి-intl 🌍తో బహుభాషా మద్దతు

AI ఎడ్యుకాడెమీ గ్లోబల్ కమ్యూనిటీ కోసం నిర్మించబడింది. బహుళ భాషల్లో కంటెంట్‌ను అందించడం మంచిదే కాదు - ప్రతి ఒక్కరికీ ఉచిత AI విద్య అనే మా మిషన్‌ను నెరవేర్చడానికి ఇది చాలా అవసరం.

మేము next-intlని ఎంచుకున్నాము ఎందుకంటే ఇది:

• ** సంక్లిష్ట మిడిల్‌వేర్ కాన్ఫిగరేషన్‌లు అవసరం లేకుండా యాప్ రూటర్**తో సజావుగా అనుసంధానించబడుతుంది
• టైప్-సురక్షిత అనువాదాలను అందిస్తుంది కాబట్టి మేము కంపైల్ సమయంలో తప్పిపోయిన అనువాద కీలను పట్టుకుంటాము
• నెస్టెడ్ లొకేల్ స్ట్రక్చర్‌లకు మద్దతిస్తుంది (మేము ఒకే పేజీ భాగంతో /en/programs మరియు /es/programas కలిగి ఉండవచ్చు)
• లోకేల్ ఆధారంగా తేదీ/నంబర్ ఫార్మాటింగ్ని స్వయంచాలకంగా నిర్వహిస్తుంది
• సర్వర్ మరియు క్లయింట్ కాంపోనెంట్‌లతో పని చేస్తుంది ఘర్షణ లేకుండా

మేము మా i18n సెటప్‌ని ఎలా రూపొందించాము:

// middleware.ts - Detects user locale and routes accordingly
import { createMiddleware } from 'next-intl/middleware';

export default createMiddleware({
  locales: ['en', 'es', 'fr', 'de', 'zh'],
  defaultLocale: 'en'
});

export const config = {
  matcher: ['/((?!api|_next|.*\\..*).*)']
};

మా అనువాద ఫైల్‌లు లొకేల్ మరియు ఫీచర్ ద్వారా నిర్వహించబడతాయి:

messages/
├── en/
│   ├── common.json
│   ├── programs.json
│   └── blog.json
├── es/
│   ├── common.json
│   └── ...
└── fr/
    └── ...

ఈ విధానం చాలా అందంగా ఉంటుంది. కొత్త భాషను జోడించడం అంటే JSON ఫైల్‌లతో కొత్త ఫోల్డర్‌ని జోడించడం - కోడ్ మార్పులు అవసరం లేదు.

MDX: కంటెంట్ కాంపోనెంట్‌లను కలుస్తుంది 📝

ఇక్కడ విషయాలు ఆసక్తికరంగా ఉంటాయి. మేము సాంప్రదాయ హెడ్‌లెస్ CMSని ఉపయోగించగలిగాము, కానీ మేము MDXని ఎంచుకున్నాము ఎందుకంటే ఇది రెండు ప్రపంచాలలో ఉత్తమమైనది: మా కోడ్‌తో పాటు సంస్కరణ-నియంత్రిత కంటెంట్ నిర్వహణ మరియు మా విద్యా కంటెంట్‌లో నేరుగా ఇంటరాక్టివ్ రియాక్ట్ భాగాలను పొందుపరిచే సామర్థ్యం.

మీరు AI ఎడ్యుకాడెమీలో బ్లాగ్ పోస్ట్ లేదా ట్యుటోరియల్ చదివినప్పుడు, మీరు కేవలం స్టాటిక్ HTML చదవడం లేదు. మీరు వీరితో పరస్పర చర్య చేస్తూ ఉండవచ్చు:

• ఇంటరాక్టివ్ కోడ్ ఉదాహరణలు ఇన్‌పుట్ మరియు అవుట్‌పుట్‌ను పక్కపక్కనే చూపుతాయి
• ఎంబెడెడ్ క్విజ్‌లు మీ అవగాహనను తనిఖీ చేస్తుంది
• విజువల్ రేఖాచిత్రాలు సంక్లిష్ట భావనలను వివరిస్తాయి
• కాల్అవుట్ బాక్స్‌లు ముఖ్యమైన సమాచారాన్ని హైలైట్ చేస్తుంది

మేము MDXని ఉపయోగిస్తున్నందున ఇవన్నీ సాధ్యమయ్యాయి. మా కంటెంట్ రచయితలు మార్క్‌డౌన్‌లో వ్రాయగలరు, కానీ డెవలపర్‌లు అనుకూల భాగాలలో ఉత్తీర్ణత సాధించగలరు:

---
title: "Understanding Neural Networks"
---

# Understanding Neural Networks

<ConceptExplainer concept="neural-networks" />

Neural networks are inspired by how our brains work...

<InteractiveQuiz questionId="nn-101" />

## Real-World Applications

<CodeExample language="python" title="Simple Neural Network" />

Next.js 15లో MDX సజావుగా పని చేయడానికి, మేము @next/mdxని ఉపయోగిస్తాము మరియు దానిని మా next.config.jsలో కాన్ఫిగర్ చేస్తాము:

// next.config.js
import createMDX from '@next/mdx';

const withMDX = createMDX({
  options: {
    remarkPlugins: [
      // Our custom plugins for syntax highlighting, TOC generation, etc.
    ],
    rehypePlugins: []
  }
});

export default withMDX({
  pageExtensions: ['ts', 'tsx', 'mdx']
});

డికప్డ్ కంటెంట్ కోసం Git సబ్‌మాడ్యూల్స్ 🔗

ఇక్కడ ఒక తెలివైన నిర్మాణ నిర్ణయం ఉంది: మా కంటెంట్ ప్రత్యేక git రిపోజిటరీలలో నివసిస్తుంది, git సబ్‌మాడ్యూల్స్‌గా ప్రధాన అప్లికేషన్‌లోకి లాగబడింది.

ఎందుకు? ఎందుకంటే ఇది అనుమతిస్తుంది:

• అసిన్క్రోనస్ వర్క్‌ఫ్లోలు: కంటెంట్ సృష్టికర్తలు డెవలపర్‌ల నుండి స్వతంత్రంగా పని చేయవచ్చు
• ఆందోళనల యొక్క స్పష్టమైన విభజన: అప్లికేషన్ రెపో కోడ్, కంటెంట్ రెపోలపై దృష్టి కేంద్రీకరిస్తుంది
• సమాంతర స్కేలింగ్: మేము వివిధ భాషలలో కంటెంట్‌ను నిర్వహించే విభిన్న బృందాలను కలిగి ఉండవచ్చు
• వెర్షన్ నియంత్రణ ప్రయోజనాలు: కంటెంట్ మార్పులు కోడ్ మార్పుల నుండి విడిగా ట్రాక్ చేయబడతాయి, రోల్‌బ్యాక్‌లు మరియు హిస్టరీ ట్రాకింగ్ క్లీనర్‌గా ఉంటాయి

మా డైరెక్టరీ నిర్మాణం ఇలా కనిపిస్తుంది:

ai-educademy/
├── content/ (git submodule)
│   ├── blog/
│   │   ├── en/
│   │   ├── es/
│   │   └── fr/
│   ├── programs/
│   │   └── [course content]
│   └── lab/
│       └── [interactive exercises]
├── app/
├── package.json
└── .gitmodules

మేము కంటెంట్‌ని అప్‌డేట్ చేయవలసి వచ్చినప్పుడు, మేము:

# Pull latest content
git submodule update --remote

# Or content authors can PR directly to the content repo

ఈ డికప్లింగ్ మా వేగం కోసం గేమ్-మారుతోంది. అప్లికేషన్ రీబిల్డ్‌లను ట్రిగ్గర్ చేయకుండా కంటెంట్‌ను అప్‌డేట్ చేయవచ్చు (ISRకి ధన్యవాదాలు), మరియు కొత్త ప్రోగ్రామ్‌లను ఇంజనీర్లు కానివారు జోడించవచ్చు.

ప్రోగ్రెసివ్ వెబ్ యాప్ (PWA) మద్దతు 📱

తక్కువ బ్యాండ్‌విడ్త్ పరిసరాలతో సహా అన్ని పరికరాలలో విద్య జరుగుతుంది. మేము AI ఎడ్యుకాడెమీని PWAగా నిర్మించాము కాబట్టి అభ్యాసకులు:

• ** ఆఫ్‌లైన్‌లో పని చేయండి**: పాఠాలను డౌన్‌లోడ్ చేయండి మరియు స్థిరమైన కనెక్టివిటీ లేకుండా పనిని పూర్తి చేయండి
• యాప్ లాగా ఇన్‌స్టాల్ చేయండి: యాప్ లాంటి అనుభవం కోసం మొబైల్‌లో హోమ్ స్క్రీన్‌కి జోడించండి
• డేటా వినియోగాన్ని తగ్గించండి: స్మార్ట్ కాషింగ్ అంటే తిరిగి వచ్చే వినియోగదారులు కంటెంట్‌ని మళ్లీ డౌన్‌లోడ్ చేయరు

// next.config.js includes PWA configuration
import withPWA from 'next-pwa';

const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development'
});

మా సేవా కార్యకర్త వ్యూహం సూటిగా ఉంటుంది:

• కాష్-ఫస్ట్ అసెట్స్: CSS, JavaScript, ఫాంట్‌లు - ఇవి తరచుగా మారవు
• కంటెంట్ కోసం నెట్‌వర్క్-మొదట: బ్లాగ్ పోస్ట్‌లు మరియు కోర్సు మెటీరియల్‌లు తాజాగా ఉండాలి
• ** API డేటా కోసం పాత-వేళ-పునరుద్ధరణ**: నేపథ్యంలో తాజా డేటాను పొందుతున్నప్పుడు కాష్ చేసిన డేటాను చూపు

వెర్సెల్ 🚀లో విస్తరణ

Next.jsతో అనుసంధానం అతుకులుగా ఉన్నందున మేము Vercelలో అమలు చేస్తాము. మా ప్రధాన శాఖకు ప్రతి పుష్ ఆటోమేటిక్ బిల్డ్‌లు మరియు విస్తరణలను ప్రేరేపిస్తుంది. మరీ ముఖ్యంగా:

• ఆటోమేటిక్ ISR రీవాలిడేషన్ వెర్సెల్ ఎడ్జ్ నెట్‌వర్క్‌లో జరుగుతుంది
• పుల్ అభ్యర్థనల కోసం ప్రివ్యూ విస్తరణలు విలీనం చేయడానికి ముందు మార్పులను సమీక్షిద్దాం
• గ్లోబల్ CDN భౌగోళికంతో సంబంధం లేకుండా మా కంటెంట్ వేగంగా లోడ్ అవుతుందని నిర్ధారిస్తుంది
• ఎడ్జ్ ఫంక్షన్‌లు అంచు వద్ద డైనమిక్ లాజిక్‌ను (భాష గుర్తింపు వంటివి) నిర్వహిస్తాము

మా విస్తరణ పైప్‌లైన్ ఇలా కనిపిస్తుంది:

Git Push → GitHub → Vercel Build → CDN Distribution → Global Users

కంటెంట్ అప్‌డేట్‌ల కోసం ప్రత్యేకంగా, మేము వెబ్‌హూక్స్‌ని సెటప్ చేసాము, తద్వారా మా కంటెంట్ సబ్‌మాడ్యూల్ అప్‌డేట్ అయినప్పుడు, Vercel స్వయంచాలకంగా తాజా కంటెంట్‌తో సైట్‌ను పునర్నిర్మిస్తుంది.

ముఖ్యమైన పనితీరు కొలమానాలు 📊

ఉన్నత స్థాయిలో పనిచేసే ప్లాట్‌ఫారమ్‌ను రూపొందించడానికి ఈ ఆర్కిటెక్చర్ అంతా కలిసి పని చేస్తుంది. మా వాస్తవ ప్రపంచ కొలమానాలు:

• కోర్ వెబ్ వైటల్స్: అన్నీ ఆకుపచ్చ (LCP <2.5సె, FID <100మి.సి., CLS <0.1)
• మొదటి కంటెంట్‌ఫుల్ పెయింట్: ప్రపంచవ్యాప్తంగా సగటు 1.2 సెకన్లు
• లైట్‌హౌస్ స్కోర్: 98/100 (పనితీరు)
• ఇంటరాక్టివ్ సమయం: 2.1 సెకన్లు

ఇవి వ్యానిటీ మెట్రిక్‌లు కావు - వేగవంతమైన సైట్‌లు అంటే ఎక్కువ మంది అభ్యాసకులు మా కంటెంట్‌ను యాక్సెస్ చేయగలరు, ముఖ్యంగా మొబైల్ నెట్‌వర్క్‌లలో లేదా పరిమిత మౌలిక సదుపాయాలు ఉన్న ప్రాంతాలలో.

ఓపెన్ సోర్స్ సూత్రాలు 💚

మొత్తం కోడ్‌బేస్ ఓపెన్ సోర్స్. ఈ భాగాలన్నీ ఎలా కలిసి పని చేస్తాయో మీరు చూడాలనుకుంటే, మీరు రిపోజిటరీని అన్వేషించవచ్చు, మెరుగుదలలను అందించవచ్చు లేదా మీ స్వంత విద్యా వేదిక కోసం ఫోర్క్ చేయవచ్చు.

మేము ఇక్కడ వివరించిన ఆర్కిటెక్చర్ యాజమాన్యం కాదు - ఇది ఘనమైన, విస్తృతంగా స్వీకరించబడిన ఓపెన్ సోర్స్ సాధనాలపై నిర్మించబడింది. సంఘం మా అభ్యాసాల నుండి ప్రయోజనం పొందుతుంది మరియు మేము సంఘం సహకారాల నుండి ప్రయోజనం పొందుతాము.

కీలక టేకావేలు

మీరు ఎడ్యుకేషనల్ ప్లాట్‌ఫారమ్ లేదా ఏదైనా కంటెంట్-హెవీ అప్లికేషన్‌ని నిర్మిస్తున్నా, పరిగణించండి:

1. మీ వినియోగ కేసుతో సమలేఖనం చేయబడిన ఫ్రేమ్‌వర్క్‌లను ఎంచుకోండి: కంటెంట్ సైట్‌ల కోసం Next.js 15 యాప్ రూటర్
2. మొదటి నుండి i18nలో పెట్టుబడి పెట్టండి: నిర్మించడం కంటే రెట్రోఫిట్ చేయడం కష్టం
3. కోడ్ నుండి డికపుల్ కంటెంట్: Git సబ్‌మాడ్యూల్స్ సమాంతర వర్క్‌ఫ్లోలను ప్రారంభిస్తాయి
4. ప్రగతిశీల మెరుగుదల పని చేస్తుంది: PWA మద్దతు వినియోగదారులు ఉన్న చోట చేరుకుంటుంది
5. ముఖ్యమైన వాటిని కొలవండి: కోర్ వెబ్ వైటల్స్ ప్రభావం విద్యా ఫలితాలను

AI ఎడ్యుకాడెమీ విద్య కోసం యాక్సెస్ చేయగల, పనితీరు మరియు నిర్వహించదగిన సాంకేతిక మౌలిక సదుపాయాలకు మా నిబద్ధతను సూచిస్తుంది. మీకు ఈ సాంకేతికతల్లో దేనిపైనా ఆసక్తి ఉంటే లేదా సహకారం అందించాలనుకుంటే, మా కోడ్ ఓపెన్ సోర్స్ మరియు మీ సహకారం కోసం వేచి ఉంది.

---

మా ప్లాట్‌ఫారమ్‌ని ప్రయత్నించాలనుకుంటున్నారా? మా ప్రోగ్రామ్‌లను అన్వేషించండి | ల్యాబ్‌ని సందర్శించండి | మా మిషన్ గురించి మరింత చదవండి