Ich grüße Sie alle. Seit einiger Zeit wollte ich einen persönlichen Blog erstellen, in dem ich meine Erfahrungen mit anderen teilen und kompakt dokumentieren kann, was ich gelernt habe. Obwohl er noch nicht ganz fertig ist, habe ich den größten Teil meines Blogs fertiggestellt. Ich werde mit euch die Technologien teilen, die ich bei der Entwicklung dieses Blogs verwendet habe, und meine Erfahrungen als Entwickler. Zunächst einmal sind die Technologien, die ich verwendet habe, folgende.
- Next.js 13 und App Router
- Sanity CMS
- Next-auth
- MongoDB
1. Next.js 13 und App Router #
Ich hatte Next.js 13 bereits in einigen Projekten vor diesem Projekt ausprobiert. App Router ermöglicht die Skalierbarkeit der Anwendung. Auch in diesem Projekt benötigte ich eine Sprachauswahlkomponente mit sowohl dynamischen als auch statischen Links, da ich wollte, dass der SEO-Bereich des Projekts sehr groß ist. Zuvor hatte ich für meine dynamisch generierten Blog-Posts die gleiche URL für verschiedene Sprachen als en/a-post-slug, en/a-post-slug und de/eine-post-slug verwendet, aber für eine bessere SEO-Erfahrung konnte ich in diesem Projekt die entsprechende übersetzte Seite einer en/a-post-slug Seite als neue statische Seiten mit en/a-post-slug und de/eine-post-slug Links erstellen. Hier habe ich mit Ihnen geteilt, wie ich dieses Problem gelöst habe. Zu diesem Zeitpunkt war es mit Next.js 13 sehr einfach, verschiedene Layouts zu verwenden, um verschiedene Gruppen von Seiten zu erstellen. Schließlich war es für mich eine gute Erfahrung, RSC (React Server Components) und Next.js App Router auszuprobieren. Das größte Problem, das ich im Page Router leicht lösen konnte, aber im App Router Schwierigkeiten hatte, war die Lokalisierung, d.h. die Sprachoptionen in der App. An diesem Punkt waren die i18next-Bibliothek und dieser link nützlich, aber an einigen Stellen hätte eine Page-Router-API, useRouter von 'next/router, meine Arbeit viel einfacher gemacht. Auch die Fehlerbehandlung kann etwas kompliziert werden, wenn man den dynamischen Ordner App Router [locale] verwendet. Weitere Ideen dazu finden Sie in diesem Thema auf github. Mit den Server-Komponenten wurde Locale irgendwann zum Prop Drilling. Ich bin jedoch sicher, dass es viel einfachere Methoden gibt. Nachdem ich die Lokalisierungsstruktur in der Anwendung installiert hatte, fand ich ein einfacheres Beispiel in einem der offiziellen Repos von Next.js und ich plane, diese Struktur in Zukunft zu installieren, um die Paketabhängigkeit zu reduzieren und den Code sauberer zu machen. Sie sollten sich auf jeden Fall das offizielle Repository unter diesem link ansehen.
2. Sanity CMS #
Mein Abenteuer mit CMS-Tools begann mit Gatsby.js und Netlify CMS. Dann entdeckte ich Contentful CMS, als ich auf der Suche nach einem Content Management System war, das die mehrsprachige Struktur meiner Firma unterstützt, und ich entwickelte 2 große Landing Pages der Firma, die mit Contentful CMS integriert sind. Contentful CMS verfügt über sehr reichhaltige Tools, sowohl in Bezug auf den Content-Editor als auch auf die Entwicklererfahrung, aber der Rich-Text-Editor unterstützt keine benutzerdefinierten Code-Blöcke und ich wollte Code-Blöcke in diesem Blog verwenden und bearbeiten. Ein weiteres Problem ist, dass der kostenlose Plan von Contentful nur 2 Sprachen zulässt. Ich wollte aber (vorerst) 3 Sprachoptionen für meinen Blog. Auf der Suche nach einem kostenlosen CMS-Tool, das diese Anforderung erfüllen würde, stieß ich auf Sanity. Das Tolle an Sanity ist, dass es kostenlos mehrere Sprachoptionen unterstützt. Darüber hinaus können Sie die Schemata Ihrer Inhalte in Ihrem Code definieren und eine typsichere Anwendung entwickeln. Ich veröffentliche alle meine Beiträge auf dieser Website, einschließlich dieses Beitrags, den ich gerade schreibe, über das Sanity-Verwaltungspanel.
Sanity bietet 2 Arten von Übersetzungsoptionen. Die erste Option ist die feldbasierte Übersetzung. Kurz gesagt, wenn Sie ein Feld namens Name in einem Dokument haben, haben Sie so viele Eingaben dafür wie n (n steht hier für die Anzahl der Sprachoptionen) Sprachen und Sie müssen aus diesen Feldern entsprechend Ihrer aktuellen Sprache filtern, während Sie Ihr Dokument abfragen. Dieses Dokument ist sehr nützlich, wenn Sie nur wenige Felder in Ihrem Schema haben, aber wenn Ihre Schemata wachsen, wird es etwas schwierig, n Eingaben für 1 Feld in einem einzigen Dokument zu sehen und zu organisieren. Ich habe die Details hier erklärt. Die 2. Option ist die dokumentenbasierte Übersetzung. Bei dieser Methode können Sie für jedes Dokument verschiedene Dokumente in verwandten Sprachen erstellen und in Ihrer Abfrage, die Sie für Ihre Daten erstellen, ein Dokument und die gewünschten Felder aus Dokumenten in anderen Sprachen abrufen, die mit diesem Dokument verwandt sind. Dies ist eine viel einfachere Methode, wenn Ihr Schema wächst. Ich halte es jedoch für das Beste, beide Methoden gemischt zu verwenden. Sie haben zum Beispiel eine begrenzte Anzahl von Feldern, wenn Sie Ihre Info-Seite aus dem Dokument ziehen. An diesem Punkt können Sie die feldbasierte Übersetzung verwenden, aber wenn es zu viele Felder in Ihren Blogbeiträgen gibt, die Sie nicht einzeln verwalten können, können Sie die dokumentbasierte Übersetzung verwenden. Die beste und die schlechteste Eigenschaft von Sanity CMS ist, dass es eine Abfragesprache namens Groq verwendet. Sie ist sehr nützlich, aber sie kostet Zeit, weil sie neu erlernt werden muss.
3.Next-Auth #
Next-auth ist ein großartiges npm-Paket. Ich wollte auf dieser Website einen Bereich einrichten, in dem Sie, die Leser, Kommentare abgeben können. Ich habe diese Bibliothek und GoogleProvider, einen der Dutzenden von Authentifizierungsdiensten, die es bietet, verwendet, damit Sie sich mit Google anmelden können, während Sie Kommentare schreiben. Mit diesem Paket können Sie sich sicher mit Ihrem Google-Konto anmelden, unter meinen Beiträgen kommentieren, Fragen stellen und mit mir interagieren. Hinterlassen Sie einen Kommentar :)
4. MongoDB #
MongoDB ist dank der einfachen Installation und des großzügigen kostenlosen Pakets meine Lieblingsdatenbank in vielen Projekten. In diesem Projekt verwende ich MongoDB, um Benutzerkommentare zu speichern. Obwohl ich gerade versuche, Prisma und SQL zu lernen, denke ich, dass MongoDB in kleinem Rahmen immer nützlich ist. Ich speichere Ihre Kommentare in MongoDB. Unten habe ich erklärt, wie ich Ihre Kommentare mit Next.js api routes speichere. Ihre Kommentare. Ihre Kommentare...
Zusammenfassend lässt sich sagen, dass dieses Projekt eigentlich als einfaches Blog begann und mich viel gelehrt hat, da ich jeden Tag etwas dazu schreibe. Ich werde versuchen, jeden Tag meine Erfahrungen mit Ihnen zu teilen, während ich diese und viele weitere neue Entwicklungen fortsetze. Vielen Dank fürs Lesen.
