Discussion on restructuring Next.js dir structure for generating paths with getStaticPaths fn.
13 replies
Last updated: Dec 5, 2022
Y
I want to do for example
<http://site.com/zhongli/best-team-ss|site.com/zhongli/best-team-ss>based on this screenshot
Dec 4, 2022, 2:09 PM
A
Hey, I am not sure but I think you need to rename your Next.js dir structure so instead of having
Then you need to generate paths for each character's team and then return all these paths as an array.
The example below is approximate, I just wrote it in slack so there can be mistakes etc.
pages/[slug]/[slug].tsxyou should have something like
pages/[character]/[team].tsxthis will give you an ability to pass a
characterand
teamas params props while generating your pages paths with
getStaticPathsfn.
Then you need to generate paths for each character's team and then return all these paths as an array.
The example below is approximate, I just wrote it in slack so there can be mistakes etc.
export async function getStaticPaths() {
const characters = await client.fetch(
`*[_type == "characters" && defined(slug.current)] {
"slug": teams[]-> {slug.current},
}`
)
const getPaths = () => {
const paths = []
characters.forEach(char => {
const characterSlug = char.slug
char.team.forEach(item => {
paths.push({ character: characterSlug, team: item.slug })
})
})
return paths
}
return {
paths: getPaths(),
fallback: false
}
}Dec 4, 2022, 3:28 PM
A
Also you probably need to update the query have both a character and a team slugs:
const characters = await client.fetch(
`*[_type == "characters" && defined(slug.current)] {
"slug": slug.current,
"teamSlugs": teams[]-> {slug.current}
}`
)Dec 4, 2022, 3:33 PM
Y
user D
Is something like this correct :export async function getStaticPaths() {
const characters = await client.fetch(
`*[_type == "characters" && defined(slug.current)] {
"slug": slug.current,
"teamSlugs": teams[]-> {slug.current}
}`
)
const paths = []
characters.forEach(char => {
const characterSlug = char.slug
char.teamSlugs.forEach(item => {
paths.push({ character: characterSlug, team: item.slug })
})
})
return {
paths: paths.map(({character, slug}) => ({
params: {character: character, slug: slug}
}) ),
fallback: false
}
}
export async function getStaticProps(context: any) {
// It's important to default the slug so that it doesn't return "undefined"
const { character= "",team = "" } = context.params
const ch = await client.fetch(`
*[_type == "characters" && slug.current == $character][0] {
name,
weapon,
element,
img,
slug,
background,
teams[]-> && slug.current == $team {
tier,
type,
slug,
characters[] {
type,
character->
}
}
}
`, { character, team }
)
return {
props: {
ch
}
}
}Dec 4, 2022, 6:30 PM
A
I am not sure about the queries. Next.js part looks ok but I recommend you to rename the [slug].tsx file to be [team].tsx or to smth that is more meaning-full. It would be more convenient and easy to understand. Also it will help you if you have another child routs inside the character route eg., [team].tsx, [clan]tsx etc.
Dec 4, 2022, 7:18 PM
A
If you give me more details about your character schema, probably I will try to help you get nested team with groq query
Dec 4, 2022, 7:19 PM
Y
Thanks, I did actually
Dec 4, 2022, 7:20 PM
Y
the issue I am facing now is
*[_type == "characters" && slug.current == $character][0] {
slug,
teams[]-> && slug.current == $team { Dec 4, 2022, 7:20 PM
Y
this part
teams[]-> && slug.current == $team { Dec 4, 2022, 7:21 PM
Y
I am not sure about it
Dec 4, 2022, 7:21 PM
A
Yes, the way you are trying to get teams has incorrect syntax
Dec 5, 2022, 8:08 AM
A
if your character teams are an array of refs, try something like this:
*[_type == "characters" && slug.current == $character][0] {
(other things),
teams[]->{
slug.current == $team => {
(anything you want from team)
}
}
}Dec 5, 2022, 8:12 AM
A
This way you should be able to get a team with the right slug
Dec 5, 2022, 8:16 AM
A
also it would be better for you to try all your queries in the sanity studio vision plugin first. If you have v2, the plugin will be installed automatically. For version 3 you should install it yourself.
Dec 5, 2022, 8:18 AM
Sanity– build remarkable experiences at scale
The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.