This Next.js and Sanity Studio tutorial explores different capabilities a developer and user can incorporate to create a website. This tutorial gives a walkthrough of how to create a next.js application, a sanity project, then combined the two applications into one to minimize confusion and updating. I developed my personal website based on the lessons learned in this tutorial and highly recommend watching and completing this tutorial if you have aspirations to build your own website.
Tutorial: https://www.youtube.com/watch?v=OcTPaUfay5I&t=3093s
Insights Gains:
The one insight gained while completing this tutorial was the opportunity to potentially work with clients with little to no technical experience and provide them with the framework for developing their website with the use of Sanity Studio. Sanity Studio allows a client to update the content of the website without modifying the code. This is a great benefit to the client because it allows easy accessibility to update and modify existing web pages, and a benefit to the developer to minimize potential syntax errors and handling.
Error Handling:
Due to Next.js updates, if you decide to try this tutorial, the version of next.js you create the app will not be the same version as the tutorial. When you go to deploy the workbook in Vercel, I had two errors in relation to the Project and Page pages props. Specifically, I returned a type error identifying the type Props is missing the type Promise<any>. To resolve this error, I will walk through my logic below for the Project page props.
First, to resolve this error, I changed the name of the type block at the top from “type Props:” to “type Params” then wrapped the {project: string} around a Promise<> element. This eliminates the error during the deployment stage with Promise<any>. Then, the export function needs to change to “…async function Page(props: { params: Params}). Finally, the last step is to add and modify the constant variables to resemble the new type and function call. First, I added a new const variable to await the props params which would be “const params = await props.params;” then modified the constant variable slug to return params.project.
To resolve the error on the Page page props, I modified the type and the calling of the export function the same way as I did for the Project page. The only difference between the Page and Project error was I did not include the extra constant variable in the Page exported function but instead changed the constant variables to “const params = await props.params” and “const page = await getPage(params.slug)”.
Overall, this was a well-informed tutorial, and I recommend to those who want to explore Sanity Studio and Next.js.
