将SANITY Studio与NextJS：增强您的网络开发

npx create-next-app@latest my-nextjs-sanity-app
cd my-nextjs-sanity-app

npm install -g @sanity/cli

sanity init

npm install @sanity/client @sanity/image-url

// sanity.js
import {createClient} from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';

const client = createClient({
  projectId: 'your_project_id', // 替换为您的项目ID
  dataset: 'production', // 如需更改，请修改
  apiVersion: '2023-10-16', // 使用API版本的发布日期
  useCdn: true, // 设置为`false`以获取最新数据
});

const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.image(source);
export default client;

// pages/index.js
import client from '../sanity';

const Home = ({ posts }) => {
  return (
    <div>
      <h1>我的文章</h1>
      {posts.map((post) => (
        <div key={post._id}>
          <h2>{post.title}</h2>
          @@##@@
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export async function getStaticProps() {
  const posts = await client.fetch('*[_type == "post"]');
  return {
    props: { posts },
  };
}

export default Home;