I'm in the process of creating a boilerplate I can reuse, update, and grow with. For the sake of saving time in the future (and maybe to help someone else out), here's how I get setup:
npx create-next-app your-project-name
cd your-project-name
In your project folder:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Configure your template paths (in your tailwind.config.js file)
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Add the Tailwind directives to your CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
Start build process:
npm run dev
npm i next-sanity
sanity init
cd sanity-studio-folder
sanity start
Create your first document type.
a. Create new file in studio/schemas folder (ex: plants.js)
b. Open your new file and add your schema data!
Example:
export default {
name: 'plants',
type: 'document',
title: 'Plants',
fields: [
{
name: 'commonName',
type: 'string',
title: 'Common Name'
}
]
}
Import your new document type info into your schema.js file
import createSchema from 'part:@sanity/base/schema-creator'
import schemaTypes from 'all:part:@sanity/base/schema-type'
import plants from './plants'
export default createSchema({
name: 'default',
types: schemaTypes.concat([plants]),
})
Make an .env file
SANITY_ID={projectID}
In your-project-name folder, run
npm i next-sanity
Create a root folder called 'utils' and in that save a new file 'client.js'. Save the following in that file:
import { createClient } from 'next-sanity'
export const client = createClient({
projectId: process.env.SANITY_ID,
dataset: 'production',
apiVersion: '2022-03-25',
useCdn: false,
})
Import the createClient
function from next-sanity
in the pages/index.js
file, or any parent component file you want to pull your sanity data in:
import { client } from '../utils/client'
export default function Home({ plants }) {
return (
<div class="bg-green">
<main>
<h2>Plants</h2>
{plants.length > 0 && (
<ul>
{plants.map((plant) => (
<li key={plant._id}>{plant?.commonName}</li>
))}
</ul>
)}
</main>
</div>
)
}
export async function getStaticProps() {
const plants = await client.fetch(`*[_type == "plants"] {
...,
"slug": slug.current,
}`)
return {
props: {
plants,
},
}
}
Add a _document.js
page under your pages directory for your global Head info!
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="en">
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,900;1,100&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
This will probably be a bit of a living document that I will update as I go!
Sanity Gotchas:
Sanity Helpful Links:
Next.JS Stuff
Tailwind