diff --git a/contentlayer.config.ts b/contentlayer.config.ts new file mode 100644 index 0000000..e1df80b --- /dev/null +++ b/contentlayer.config.ts @@ -0,0 +1,18 @@ + +import { defineDocumentType, makeSource } from 'contentlayer2/source-files' + +export const Post = defineDocumentType(() => ({ + name: 'Post', // オブジェクトの名前 + filePathPattern: `posts/**/*.md`, // どのパスにあるかの指定。 + fields: { // Post が持つプロパティを指定する + title: { type: 'string', required: true }, // titleは文字列で必須 + date: { type: 'date', required: true }, // dateは日時で必須 + }, + computedFields: { // 単純な値のプロパティではなく、計算で取得できるプロパティ + // url は 文字列を返す。 + url: { type: 'string', resolve: (post) => `/${post._raw.flattenedPath}` }, + }, +})) + +// contents ディレクトリがコンテンツのルート。型としては Post を利用 +export default makeSource({ contentDirPath: 'contents', documentTypes: [Post] }) \ No newline at end of file diff --git a/contents/posts/post-1.md b/contents/posts/post-1.md new file mode 100644 index 0000000..fa3f0a9 --- /dev/null +++ b/contents/posts/post-1.md @@ -0,0 +1,5 @@ +--- +title: My First Post +date: 2021-12-24 +--- +Ullamco et nostrud magna commodo nostrud ... diff --git a/contents/posts/post-2.md b/contents/posts/post-2.md new file mode 100644 index 0000000..10d39a5 --- /dev/null +++ b/contents/posts/post-2.md @@ -0,0 +1,5 @@ +--- +title: My Second Post +date: 2021-12-24 +--- +Ullamco et nostrud magna commodo nostrud ... diff --git a/contents/posts/post-3.md b/contents/posts/post-3.md new file mode 100644 index 0000000..51f8098 --- /dev/null +++ b/contents/posts/post-3.md @@ -0,0 +1,5 @@ +--- +title: My Third Post +date: 2021-12-24 +--- +Ullamco et nostrud magna commodo nostrud ... diff --git a/src/app/page.tsx b/src/app/page.tsx index 3eee014..252059f 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,101 +1,34 @@ -import Image from "next/image"; -export default function Home() { +import Link from 'next/link' +import { compareDesc, format, parseISO } from 'date-fns' +import { allPosts, Post } from 'contentlayer/generated' + +function PostCard(post: Post) { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
+
+

+ + {post.title} + +

+ +
+
+ ) +} -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- +export default function Home() { + const posts = allPosts.sort((a, b) => compareDesc(new Date(a.date), new Date(b.date))) + console.log('posts', posts) + + return ( +
+

Next.js + Contentlayer Example

+ {posts.map((post, idx) => ( + + ))}
- ); + ) }