Täysiverinen blogi kirjoittamiseen ja artikkeleiden hallintaan. Opi MDX-sisällönhallintaa, hakutoimintoja ja autentikaatiota rakentamalla oma CMS.
Keskitaso · 6-10 tuntia · Next.js, TypeScript, Tailwind CSS, Supabase, MDX
Kopioi tämä Cursoriin tai Claude Codeen ja aloita rakentaminen.
Luo blogi-sovelluksen perusrakenne. Tech stack: - Next.js 14 App Router - TypeScript - Tailwind CSS - Supabase (tietokanta, auth) - MDX artikkeleiden renderöintiin Tietokantarakenne: - posts (id, title, slug, content, excerpt, published_at, category_id, author_id) - categories (id, name, slug) - comments (id, post_id, author_name, content, created_at) - profiles (id, email, name, role) Sivut: - / (etusivu, uusimmat artikkelit) - /blog (kaikki artikkelit, filtteröinti) - /blog/[slug] (yksittäinen artikkeli) - /admin (suojattu admin-paneeli) Aloita tietokantarakenteesta ja API-funktioista.
Luo Next.js-projekti ja Supabase-tietokanta.
Luo Next.js 14 blogi-projekti TypeScriptillä. Konfiguroi Supabase-yhteys ja luo taulut: posts, categories, comments. Lisää tarvittavat tyypit.
Luo etusivu joka näyttää artikkelit.
Luo BlogList-komponentti joka hakee ja näyttää artikkelit Supabasesta. Näytä otsikko, tiivistelmä, päivämäärä, kategoria ja lukuaika. Lisää sivutus.
Rakenna artikkelin lukusivu.
Luo dynaaminen sivu /blog/[slug] joka näyttää yksittäisen artikkelin. Renderöi MDX-sisältö, näytä kirjoittaja, päivämäärä, tagit. Lisää sisällysluettelo.
Luo ylläpitonäkymä artikkeleiden hallintaan.
Luo suojattu admin-paneeli osoitteeseen /admin. Sisällytä artikkelilista, uuden artikkelin luonti, muokkaus ja poisto. Käytä Supabase Authia autentikaatioon.
Lisää artikkeleiden haku.
Luo hakutoiminto joka etsii artikkeleita otsikon ja sisällön perusteella. Lisää debounce ja näytä tulokset reaaliajassa. Käytä Supabase full-text searchia.
Lisää artikkeleihin kommentointi.
Luo kommenttijärjestelmä artikkeleille. Käyttäjä voi jättää kommentin nimellä ja viestillä. Näytä kommentit artikkelin alla. Lisää moderointitoiminto adminille.
Markdown/MDX artikkelit
Kategoriat ja tagit
Hakutoiminto
Kommenttijärjestelmä
Admin-paneeli
RSS-syöte
SEO-optimointi
Kun perusprojekti on valmis:
Lisää newsletter-tilaus
Sosiaalisen median jako-napit
Lukuajan arviointi
Artikkeleiden versiohistoria
Ajastettu julkaisu
Analytiikka-dashboard
Rakenna moderni ja konvertoiva laskeutumissivu SaaS-tuotteelle. Opi markkinointisivun rakenne, CTA-elementtien sijoittelu ja responsiivinen design käytännössä.
Moderni ja responsiivinen portfolio-sivusto, joka esittelee työsi ja osaamisesi. Opi Next.js:n perusteet ja deployn Verceliin - täydellinen ensimmäinen projekti.
Klassinen tehtävälista-sovellus modernilla toteutuksella. Opi React state-hallintaa, CRUD-operaatioita ja tietokannan käyttöä rakentamalla sovellus jota käytät oikeasti.
Valitse työkalu ja käytä aloituspromptiä.