Building a production-ready news portal is complex — handling multilingual content, admin CMS, advertisement management, and ISR-based performance all at once. In this guide, we'll walk through the complete architecture of a bilingual news portal built with Next.js 15 (App Router), TypeScript, Tailwind CSS, Prisma, and NextAuth.
Why Next.js 15 for a News Portal?
Next.js 15 introduces several improvements that make it the ideal framework for high-traffic news portals:
- Turbopack — blazing-fast local development
- Improved ISR — granular revalidation at the page or segment level
- Partial Prerendering (PPR) — mix static shell with dynamic streaming content
- React 19 support — concurrent features for a smoother UX
For a news portal where freshness and SEO matter most, ISR (Incremental Static Regeneration) is a game-changer.
Project Architecture
/app
/[locale] # next-intl locale routing
/page.tsx # Homepage (ISR: 60s)
/[category]
/[slug] # Article detail (ISR: 300s)
/admin # Admin dashboard (server-protected)
/api
/articles # REST API routes
/ads # Advertisement endpoints
Setting Up Bilingual Support
We use next-intl for i18n. The URL structure is:
/en/for English content/np/for Nepali content
Each article has separate fields per locale:
model Post {
id String @id @default(cuid())
titleEn String
titleNp String
slugEn String @unique
slugNp String @unique
contentEn String @db.Text
contentNp String @db.Text
excerptEn String
excerptNp String
// SEO per locale
metaTitleEn String?
metaTitleNp String?
metaDescEn String?
metaDescNp String?
}
This lets editors write fully independent content and SEO metadata for each language — critical for Nepali-language SEO.
ISR Configuration
// app/[locale]/page.tsx
export const revalidate = 60; // Homepage: revalidate every 60 seconds
// app/[locale]/[category]/[slug]/page.tsx
export const revalidate = 300; // Articles: revalidate every 5 minutes
For breaking news, you can trigger on-demand revalidation via a webhook from the admin CMS:
// app/api/revalidate/route.ts
import { revalidatePath } from "next/cache";
export async function POST(req: Request) {
const { slug, locale } = await req.json();
revalidatePath(`/${locale}/${slug}`);
return Response.json({ revalidated: true });
}
Admin Dashboard
The admin CMS is built entirely within Next.js using Server Actions and the App Router:
- TipTap rich text editor with image uploads to Cloudflare R2
- Role-based access: Admin → Editor → Journalist → User
- Post scheduling with
publishedAtdate field - Media library with R2/S3 presigned uploads
Advertisement System
The ad system supports 6 positions with IAB-standard sizes:
| Position | Size |
|---|---|
| Header Banner | 728×90 (Leaderboard) |
| Sidebar | 300×250 (Medium Rectangle) |
| In-Article | 336×280 |
| Between Sections | 970×90 |
| Footer Banner | 728×90 |
| Popup | 300×300 |
Each ad tracks impressions and clicks via a dedicated API endpoint, with date scheduling built in.
Performance Results
Using ISR with Cloudflare R2 for media storage:
- Lighthouse Score: 95+ on mobile
- LCP: < 1.8s on article pages
- First contentful paint: < 0.9s (static shell)
Ready-Made Solution
Building all this from scratch takes months. Bidhex News is a production-ready template that includes everything described above — ready to deploy in a day.