iducationducation
IndexArticlesFormationsProfilOutilsBibliothech
N°014 — 2026
Navigation
01Index02Articles03Formations04Profil05Outils06Bibliothech
N°014 — 2026
iducationducation
IndexArticlesFormationsProfilOutilsBibliothech
N°014 — 2026
Navigation
01Index02Articles03Formations04Profil05Outils06Bibliothech
N°014 — 2026
Formations
JavaScript · Intermédiaire

OpenRss

Construire un lecteur RSS complet de A à Z avec Next.js, TypeScript et PostgreSQL. Authentification, base de données, déploiement.

Next.jsTypeScriptPostgreSQLTailwind CSS
GitHub
01Setup du projet02Fetcher et parser un flux RSS
Chapitre 2·20 min

Fetcher et parser un flux RSS

Un flux RSS, c'est du XML. On va le fetcher côté serveur et le transformer en objets JavaScript propres.

Installer le parser

Terminal
npm install rss-parser

rss-parser gère les variations de format entre les flux — Atom, RSS 2.0, podcasts. On n'a pas à réinventer ça.

Créer le module de parsing

lib/rss.ts
import Parser from 'rss-parser'
 
const parser = new Parser()
 
export interface FeedItem {
  title: string
  link: string
  pubDate: string
  contentSnippet?: string
  guid: string
}
 
export interface Feed {
  title: string
  description?: string
  items: FeedItem[]
}
 
export async function fetchFeed(url: string): Promise<Feed> {
  const feed = await parser.parseURL(url)
  return {
    title: feed.title ?? url,
    description: feed.description,
    items: feed.items.map(item => ({
      title: item.title ?? '',
      link: item.link ?? '',
      pubDate: item.pubDate ?? '',
      contentSnippet: item.contentSnippet,
      guid: item.guid ?? item.link ?? '',
    })),
  }
}

Tester dans une route API

app/api/feed/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { fetchFeed } from '@/lib/rss'
 
export async function GET(req: NextRequest) {
  const url = req.nextUrl.searchParams.get('url')
  if (!url) return NextResponse.json({ error: 'url manquante' }, { status: 400 })
 
  try {
    const feed = await fetchFeed(url)
    return NextResponse.json(feed)
  } catch {
    return NextResponse.json({ error: 'flux inaccessible' }, { status: 502 })
  }
}

Tester avec curl :

Terminal
curl "http://localhost:3000/api/feed?url=https://feeds.feedburner.com/TechCrunch"

On devrait recevoir un JSON avec les articles du flux. Prochaine étape : stocker les flux en base.

Précédent
Setup du projet

Développeur fullstack passionné. J'apprends en construisant et je documente tout — front, back, outils. Le code s'apprend mieux en public.

Naviguer

IndexTous les articlesFormationsProfilOutilsBibliothech

Ailleurs

GitHub RSS

Newsletter

Les articles, libs et découvertes. Une fois par semaine, pas plus.

© 2026 William LoreeConçu & codé à la main