Next.js + Tailwind CSS Example

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

Step to create this repo

• npx create-next-app -e with-tailwindcss ./
• npm install graphql graphql-request html-react-parser moment react-multi-carousel sass

APIs / Notes

• getStaticProps - Next.js

• • When to use?
• • • The data comes from a headless CMS

• getStaticPaths - Next.js

• • When to use?
• • • The data comes from a headless CMS / database / fileSystem
• • • The page must be pre-rendered (for SEO)
• • will only run during build in production, it will not be called during runtime

// pages/posts/[id].js

// Generates `/posts/1` and `/posts/2`
export async function getStaticPaths() {
  return {
    paths: [{ params: { id: "1" } }, { params: { id: "2" } }],
    fallback: false, // can also be true or 'blocking'
  };
}

// `getStaticPaths` requires using `getStaticProps`
export async function getStaticProps(context) {
  return {
    // Passed to the page component as props
    props: { post: {} },
  };
}

export default function Post({ post }) {
  // Render post...
}

• Image from "next/image";
• • achieve good Core Web Vitals
• • factored into Google's search rankings