Creating Dynamic Pages

In previous chapters, we’ve covered the process of creating a new page. To refresh your memory, it is as simple as creating a new directory inside src/routes/ with the desired route name. Inside that directory, we create +page.svelte, which is simply a Svelte component that is then rendered as the page shown in the browser. An embarrassingly simple About page might look like this:

src/routes/about/+page.svelte

<div class='wrapper'>
  <h1>About</h1>
  <p>
    Lorem ipsum dolor sit amet...
  </p>
</div>

This example illustrates just how simple adding a new page is. In it, we see a div, an h1 title tag, and a paragraph p tag with the lorem ipsum sample text. Of course, in a real-world scenario, it would have much more content as well as some styles. This example exists only to show how simple it is to add a new, static page.

But what if you needed to...