Nextjs is a framework for building web sites in JS React getting data from any API.
- 👨🏫🚀 https://nextjs.org/docs/getting-started (see the Automatic Setup section for setting up a next.js project - the
--typescriptversion is recommended to make it more relevant for the Cosmo starter) - 🚀 Working w/ Layouts in Nextjs: https://nextjs.org/docs/basic-features/layouts (also a little bit about the Next.js built in
pages/_app.tsxhere) - 🚀 How to set up routes for new pages in our projects: https://nextjs.org/docs/routing/introduction
- and how to get data for these pages: https://nextjs.org/docs/basic-features/data-fetching/overview
- 🚀 In most cases we build statically generated pages - SSG - Static-site generation: https://nextjs.org/docs/basic-features/data-fetching/get-static-props
- 👨🏫🚀 Get started w/ Sanity https://www.sanity.io/docs/getting-started (you can set up a free personal account to do tests while following this guide)
- 👨🏫🚀 https://www.sanity.io/docs/connect-your-content-to-next-js
- https://www.github.com/sanity-io/next-sanity
- Introduction: https://vercel.com/docs
- Nextjs / sanity starter on vercel: https://github.com/vercel/next.js/tree/canary/examples/cms-sanity
- Next.js on Vercel: https://vercel.com/docs/concepts/next.js/overview
Styled components is our css-in-js tool of choice. With it we can with a few lines of code create a css styled component and write it's css styles in js tagged literals like
const OurGreatComponent = styled.div`
background: yellow;
text: purple;
box-shadow: 0 0 0 3px red;
`;and use it in our React template like
function MyComponent() {
return (
<OurGreatComponent>
<h1>This is great!</h1>
<p>This is the text about our super awesome component...</p>
</OurGreatComponent>
);
}- 🚀 Styled components basics: https://styled-components.com/docs/basics
- The styled-components Happy Path: https://www.joshwcomeau.com/css/styled-components/
We are also using styled-components Theme system to be able to do central changes to the component layout to better match a projects branding: