#Create a homepage with Strapi

11 messages · Page 1 of 1 (latest)

woven hill
#

I just started using Strapi for the first time, and I use Astro for the front-end. I created a ./src/pages/[slug].astro file, and it works for pages with a slug. But when I browser to the Astro instance without using a slug (/), then I get a 404.

---
import fetchApi from '../lib/strapi';
import type Page from '../interfaces/page';
import Layout from '../layouts/Layout.astro';

export async function getStaticPaths() {
    const pages = await fetchApi<Page[]>({
        endpoint: 'pages',
        wrappedByKey: 'data',
    });

    return pages.map((page) => ({
        params: { slug: page.attributes.slug },
        props: page,
    }));
}
type Props = Page;

const page = Astro.props;
---

<Layout title={page.attributes.title}>
    <section>
        <div class='prose prose-base mx-auto'>
            <h1>{page.attributes.title}</h1>
        </div>
    </section>
</Layout>

I believe I can create an index.astro file where I fetch a specific page, but I don't know if that's the best approach.

hallow thunder
#

I believe you want [...slug]

woven hill
#

@hallow thunder as filename, with the same contents?

I tried it, but now I get:

Invalid getStaticPaths route parameter for slug. Expected undefined, a string or a number, received object (null)

This is because the homepage doesn't have a slug. When I add one, I get a 404

#

I appreciate the help btw

hallow thunder
#

<@&1129102257422610512> Having
Some trouble with this one this morning. I have the idea down.

uncut bear
#

slug should be undefined for the home page

ashen hedge
#

You have a couple of options:

src/pages/index.astro - your home page
src/pages/[slug].astro - your other pages

or

src/pages/[...slug].astro - all your pages, including home page (at "/"), which requires an undefined slug as Florian pointed out.
hallow thunder
#

Ahh that makes sense then

stable ospreyBOT
#
If your issue is resolved, please help by doing the following two steps:
  1. From the ellipses (3-dot menu) in the top-right corner of the post (not the first message), edit the tags to include the Solved tag.
  2. From the same ellipses, select Close Post.
    Your post will still be available to search and can be re-opened simply by replying in it. Closing a post moves it down with older posts, so we can more easily focus on issues that still need to be resovled.
    Thank you for your help!
woven hill
#

Apologies for the late response. I didn't have time to test this.

I just tried it out, but I get this error:

Invalid getStaticPaths route parameter for slug. Expected undefined, a string or a number, received object (null)

#

(The slug is empty)