Why: the goal or problem

Imagine a neighborhood journal where residents read and save articles. Its team wants component-built pages and one interactive Save control without sending a full app.

How: work toward a solution

Start a neighborhood journal with three Markdown articles and one layout. Next builds an index and three article pages, then sends files through hosting to the browser. Enable the optional Save island: article text stays readable. Missing layout stops the build; static files alone cannot retain personal saves. Previous, Reset, or reload restores earlier states.

Build a neighborhood journal

Concept simulation

Astro

For a neighborhood journal, Next traces source → build → output → host → browser.

  1. 01 Three Markdown articles + layout
    • block-party.md
    • pet-adoption.md
    • community-meeting.md
    • Shared layout
  2. 02 Astro component build

    Waiting

  3. 03 Generated HTML files 0

    index.html · block-party.html · pet-adoption.html · community-meeting.html

  4. 04 Static host · publish files
  5. 05 Browser · read three articles

Three Markdown articles + layout

Execution boundary
Build: components and Markdown → HTML; selected islands run in the browser.
State and responsibility
Publisher owns builds and artifacts; a separate API owns personal saves.

A fictional demo within this article. Reset or reload restores its initial state.

What: the concept

Astro renders content into HTML and adds client interactivity through selected islands. This example uses static output; Astro also supports server rendering.

Pair an island with a separate storage API.

Source