AI Educademy の構築には、コードベースをクリーンで開発者にとって使いやすいものに保ちながら、世界中の学習者がアクセスでき、保守が容易で、数百万のユーザーにサービスを提供できる十分なスケーラビリティを備えたプラットフォームを作成するという、独特の技術的課題が提示されました。
この詳細な説明では、Next.js 15 の選択から git サブモジュールを使用して多言語コンテンツを管理する方法まで、プラットフォームを形成したアーキテクチャ上の決定について説明します。教育プラットフォーム、ドキュメント サイト、またはコンテンツの多いアプリケーションを構築している場合でも、ここで実用的な洞察を見つけることができます。
私たちが AI Educademy の構築を開始したとき、Next.js 14 が標準でした。私たちがリリースするまでに、App Router が大幅に改善された Next.js 15 がリリースされました。いくつかの要素が私たちの目標と完全に一致したため、私たちはジャンプすることができました。
デフォルトでサーバー コンポーネント: Next.js 15 アプリ ルーターはデフォルトでサーバー コンポーネントを使用します。つまり、単純な操作では追加の API ルートを使用せずにコンポーネントでデータを直接フェッチできます。これにより、複雑さが軽減され、そのままの状態でパフォーマンスが向上します。
増分静的再生 (ISR): 教育内容は常に変化するわけではありませんが、変化します。 ISR を使用すると、ビルド時にページを事前レンダリングし、スケジュールに従ってページを再検証できます。これは、オンデマンド レンダリングによるパフォーマンスへの影響がなく、ブログ投稿、チュートリアル、コース教材が常に新鮮であることを意味します。
組み込みの最適化: 画像の最適化、フォントの読み込み、コード分割は自動的に処理されます。これらの機能の構築や構成にサイクルを費やす必要はなく、機能するだけです。
ファイルベースのルーティング: App Router の直感的なファイル構造により、ページと 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
AI Educademy はグローバル コミュニティ向けに構築されています。複数の言語でコンテンツを提供することは、あると便利なだけではなく、すべての人に無料の 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 ファイルを含む新しいフォルダーを追加することを意味します。コードを変更する必要はありません。
ここからが興味深いことになります。従来のヘッドレス CMS を使用することもできましたが、コードとともにバージョン管理されるコンテンツ管理と、インタラクティブな React コンポーネントを教育コンテンツに直接埋め込む機能という、両方の長所を備えた MDX を選択しました。
AI Educademy のブログ投稿やチュートリアルを読むとき、単に静的な HTML を読んでいるわけではありません。あなたは以下とやり取りしている可能性があります:
これらすべてが可能になるのは、MDX を使用しているためです。コンテンツ作成者は Markdown で記述することができますが、開発者はカスタム コンポーネントを渡すことができます。
---
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 サブモジュールとしてメイン アプリケーションに取り込まれます。
なぜ？それは次のことを可能にするからです:
ディレクトリ構造は次のようになります。
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 のおかげで) アプリケーションの再構築をトリガーせずにコンテンツを更新でき、エンジニアでなくても新しいプログラムを追加できます。
教育は、低帯域幅環境を含むすべてのデバイスで行われます。 AI Educademy を 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'
});
私たちの Service Worker 戦略は単純です。
Next.js との統合はシームレスであるため、Vercel にデプロイします。メイン ブランチにプッシュするたびに、自動ビルドとデプロイメントがトリガーされます。さらに重要なこと:
デプロイメントパイプラインは次のようになります。
Git Push → GitHub → Vercel Build → CDN Distribution → Global Users
特にコンテンツ更新については、コンテンツ サブモジュールが更新されると Vercel が新しいコンテンツでサイトを自動的に再構築できるように Webhook を設定しました。
このアーキテクチャすべてが連携して、トップレベルでパフォーマンスを発揮するプラットフォームを作成します。私たちの現実世界の指標:
これらは虚栄的な指標ではありません。サイトが高速であるということは、より多くの学習者がコンテンツ、特にモバイル ネットワーク上やインフラストラクチャが限られている地域のコンテンツにアクセスできることを意味します。
コードベース全体がオープンソースです。これらすべての要素がどのように連携するかを確認したい場合は、リポジトリを探索したり、改善に貢献したり、独自の教育プラットフォーム用にフォークしたりできます。
ここで説明したアーキテクチャは独自のものではありません。広く採用されている堅牢なオープンソース ツールに基づいて構築されています。コミュニティは私たちの学習から恩恵を受け、私たちはコミュニティへの貢献から恩恵を受けます。
教育プラットフォームを構築している場合でも、コンテンツの多いアプリケーションを構築している場合でも、次の点を考慮してください。
AI Educademy は、教育向けのアクセス可能でパフォーマンスが高く、保守可能な技術インフラストラクチャに対する私たちの取り組みを表しています。これらのテクノロジーに興味がある場合、または貢献したい場合は、私たちのコードはオープンソースであり、あなたの協力を待っています。
当社のプラットフォームを試してみませんか? プログラムを詳しく見る | 研究室訪問 | 私たちの使命について詳しく読む