Skip to content

Commit 7456941

Browse files
sergioalvzsergioalvz
authored
Merge pull request #268 from codecoolture/next-mdx-remote-client
Transition to next-mdx-remote-client
2 parents a82e426 + 6543833 commit 7456941

File tree

6 files changed

+85
-76
lines changed

6 files changed

+85
-76
lines changed

‎components/Codeblock/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { classNames } from "@/lib/classNames";
22

3-
type CodeblockProps = Pick<React.JSX.IntrinsicElements["pre"], "children" | "className">;
3+
type CodeblockProps = React.JSX.IntrinsicElements["pre"];
44

5-
export function Codeblock({ children }: CodeblockProps) {
6-
return <pre className={classNames("Codeblock")}>{children}</pre>;
5+
export function Codeblock({ className, ...props }: CodeblockProps) {
6+
return <pre className={classNames("Codeblock", className)} {...props} />;
77
}

‎layouts/Post/index.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
1+
import { MDXClient } from "next-mdx-remote-client";
2+
import { type SerializeResult } from "next-mdx-remote-client/serialize";
23

34
import { ApiArticle } from "@/cms/api/ApiArticle";
45
import { Blockquote } from "@/components/Blockquote";
@@ -20,12 +21,16 @@ import { Footer } from "./components/Footer";
2021
export interface PostProps {
2122
breadcrumbs: Array<{ label: string; url?: string }>;
2223

23-
mdx: MDXRemoteSerializeResult;
24+
mdx: SerializeResult;
2425

2526
post: ApiArticle;
2627
}
2728

28-
export function Post({ breadcrumbs, mdx, post }: PostProps) {
29+
export function Post({ breadcrumbs, mdx, post }: Readonly<PostProps>) {
30+
if ("error" in mdx) {
31+
throw mdx.error;
32+
}
33+
2934
return (
3035
<>
3136
<Seo post={post} />
@@ -38,7 +43,7 @@ export function Post({ breadcrumbs, mdx, post }: PostProps) {
3843
<Timestamp date={post.date} />
3944
</header>
4045

41-
<MDXRemote
46+
<MDXClient
4247
components={{
4348
a: Link,
4449
blockquote: Blockquote,

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,7 @@
1414
"front-matter": "4.0.2",
1515
"lodash": "4.17.21",
1616
"next": "16.1.0",
17-
"next-mdx-remote": "5.0.0",
18-
"prismjs": "1.30.0",
17+
"next-mdx-remote-client": "^2.1.7",
1918
"react": "19.2.3",
2019
"react-dom": "19.2.3",
2120
"react-icons": "5.5.0",

‎pages/blog/[slug].tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { GetStaticPaths, GetStaticProps } from "next";
2-
import { MDXRemoteSerializeResult } from "next-mdx-remote";
3-
import { serialize } from "next-mdx-remote/serialize";
2+
import { serialize, type SerializeResult } from "next-mdx-remote-client/serialize";
43
import React from "react";
5-
import rehypeHighligh from "rehype-highlight";
4+
import rehypeHighlight from "rehype-highlight";
65
import rehypeUnwrapImages from "rehype-unwrap-images";
76
import remarkGfm from "remark-gfm";
87

@@ -13,7 +12,7 @@ import { isDevelopment } from "@/lib/env";
1312

1413
interface ArticleProps {
1514
article: ApiArticle;
16-
mdx: MDXRemoteSerializeResult;
15+
mdx: SerializeResult;
1716
}
1817

1918
export default class Articles extends React.Component<ArticleProps> {
@@ -47,10 +46,14 @@ export const getStaticProps: GetStaticProps<ArticleProps> = async ({ params }) =
4746
props: {
4847
article: article.toApiArticle({ cover: "https://codecoolture.com/static/articles/cover.jpg" }),
4948

50-
mdx: await serialize(article.getContent(), {
51-
mdxOptions: {
52-
rehypePlugins: [rehypeHighligh, rehypeUnwrapImages],
53-
remarkPlugins: [remarkGfm],
49+
mdx: await serialize({
50+
source: article.getContent(),
51+
52+
options: {
53+
mdxOptions: {
54+
rehypePlugins: [rehypeHighlight, rehypeUnwrapImages],
55+
remarkPlugins: [remarkGfm],
56+
},
5457
},
5558
}),
5659
},

‎pages/notes/[slug].tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,21 @@
11
import { GetStaticPaths, GetStaticProps } from "next";
2-
import { MDXRemoteSerializeResult } from "next-mdx-remote";
3-
import { serialize } from "next-mdx-remote/serialize";
4-
import React from "react";
5-
import rehypeHighligh from "rehype-highlight";
2+
import rehypeHighlight from "rehype-highlight";
63
import rehypeUnwrapImages from "rehype-unwrap-images";
74
import remarkGfm from "remark-gfm";
5+
import { serialize, type SerializeResult } from "next-mdx-remote-client/serialize";
86

97
import { ApiArticle } from "@/cms/api/ApiArticle";
108
import { getNotesRepository } from "@/cms/repositories";
119
import { Post } from "@/layouts/Post";
1210
import { isDevelopment } from "@/lib/env";
1311

14-
interface NoteProps {
15-
mdx: MDXRemoteSerializeResult;
12+
type NoteProps = {
13+
mdx: SerializeResult;
1614
note: ApiArticle;
17-
}
15+
};
1816

19-
export default class Notes extends React.Component<NoteProps> {
20-
public render() {
21-
return <Post breadcrumbs={[{ label: "Notes", url: "/notes" }]} mdx={this.props.mdx} post={this.props.note} />;
22-
}
17+
export default function Note(props: Readonly<NoteProps>) {
18+
return <Post breadcrumbs={[{ label: "Notes", url: "/notes" }]} mdx={props.mdx} post={props.note} />;
2319
}
2420

2521
export const getStaticPaths: GetStaticPaths = async () => {
@@ -47,10 +43,14 @@ export const getStaticProps: GetStaticProps<NoteProps> = async ({ params }) => {
4743
props: {
4844
note: note.toApiArticle({ cover: "https://codecoolture.com/static/notes/cover.jpg" }),
4945

50-
mdx: await serialize(note.getContent(), {
51-
mdxOptions: {
52-
rehypePlugins: [rehypeHighligh, rehypeUnwrapImages],
53-
remarkPlugins: [remarkGfm],
46+
mdx: await serialize({
47+
source: note.getContent(),
48+
49+
options: {
50+
mdxOptions: {
51+
rehypePlugins: [rehypeHighlight, rehypeUnwrapImages],
52+
remarkPlugins: [remarkGfm],
53+
},
5454
},
5555
}),
5656
},

‎yarn.lock‎

Lines changed: 46 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
# yarn lockfile v1
33

44

5-
"@babel/code-frame@^7.23.5", "@babel/code-frame@^7.27.1":
5+
"@babel/code-frame@^7.27.1":
66
version "7.27.1"
77
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.27.1.tgz#200f715e66d52a23b221a9435534a91cc13ad5be"
88
integrity sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==
@@ -639,7 +639,7 @@
639639
"@mdx-js/mdx" "^3.0.0"
640640
source-map "^0.7.0"
641641

642-
"@mdx-js/mdx@^3.0.0", "@mdx-js/mdx@^3.0.1":
642+
"@mdx-js/mdx@^3.0.0", "@mdx-js/mdx@^3.1.1":
643643
version "3.1.1"
644644
resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-3.1.1.tgz#c5ffd991a7536b149e17175eee57a1a2a511c6d1"
645645
integrity sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ==
@@ -670,7 +670,7 @@
670670
unist-util-visit "^5.0.0"
671671
vfile "^6.0.0"
672672

673-
"@mdx-js/[email protected]", "@mdx-js/react@^3.0.1":
673+
"@mdx-js/[email protected]", "@mdx-js/react@^3.1.1":
674674
version "3.1.1"
675675
resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-3.1.1.tgz#24bda7fffceb2fe256f954482123cda1be5f5fef"
676676
integrity sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==
@@ -976,7 +976,7 @@
976976
dependencies:
977977
marked "*"
978978

979-
"@types/mdast@^4.0.0":
979+
"@types/mdast@^4.0.0", "@types/mdast@^4.0.4":
980980
version "4.0.4"
981981
resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-4.0.4.tgz#7ccf72edd2f1aa7dd3437e180c64373585804dd6"
982982
integrity sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==
@@ -3853,7 +3853,7 @@ mdast-util-mdx@^3.0.0:
38533853
mdast-util-mdxjs-esm "^2.0.0"
38543854
mdast-util-to-markdown "^2.0.0"
38553855

3856-
mdast-util-mdxjs-esm@^2.0.0:
3856+
mdast-util-mdxjs-esm@^2.0.0, mdast-util-mdxjs-esm@^2.0.1:
38573857
version "2.0.1"
38583858
resolved "https://registry.yarnpkg.com/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz#019cfbe757ad62dd557db35a695e7314bcc9fa97"
38593859
integrity sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==
@@ -4351,17 +4351,18 @@ natural-compare@^1.4.0:
43514351
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
43524352
integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
43534353

4354-
next-mdx-remote@5.0.0:
4355-
version "5.0.0"
4356-
resolved "https://registry.yarnpkg.com/next-mdx-remote/-/next-mdx-remote-5.0.0.tgz#028a2cf5cf7f814d988d7ab11a401bed0f31b4ee"
4357-
integrity sha512-RNNbqRpK9/dcIFZs/esQhuLA8jANqlH694yqoDBK8hkVdJUndzzGmnPHa2nyi90N4Z9VmzuSWNRpr5ItT3M7xQ==
4354+
next-mdx-remote-client@^2.1.7:
4355+
version "2.1.7"
4356+
resolved "https://registry.yarnpkg.com/next-mdx-remote-client/-/next-mdx-remote-client-2.1.7.tgz#ef4210138f850c08290c6619545060c95527b000"
4357+
integrity sha512-IwGYX3iwZ5UwXYIO3VQV9wE65KWC/pB8PLacmwgjYz65pydRqxIrRf70AXA6mZvR747mh4p6x+E868BhNbpP3A==
43584358
dependencies:
4359-
"@babel/code-frame" "^7.23.5"
4360-
"@mdx-js/mdx" "^3.0.1"
4361-
"@mdx-js/react" "^3.0.1"
4362-
unist-util-remove "^3.1.0"
4363-
vfile "^6.0.1"
4364-
vfile-matter "^5.0.0"
4359+
"@babel/code-frame" "^7.27.1"
4360+
"@mdx-js/mdx" "^3.1.1"
4361+
"@mdx-js/react" "^3.1.1"
4362+
remark-mdx-remove-esm "^1.2.1"
4363+
serialize-error "^12.0.0"
4364+
vfile "^6.0.3"
4365+
vfile-matter "^5.0.1"
43654366

43664367
[email protected]:
43674368
version "16.1.0"
@@ -4651,11 +4652,6 @@ pretty-bytes@^5.6.0:
46514652
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
46524653
integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
46534654

4654-
[email protected]:
4655-
version "1.30.0"
4656-
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.30.0.tgz#d9709969d9d4e16403f6f348c63553b19f0975a9"
4657-
integrity sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==
4658-
46594655
process@^0.11.10:
46604656
version "0.11.10"
46614657
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
@@ -4847,6 +4843,15 @@ [email protected]:
48474843
remark-stringify "^11.0.0"
48484844
unified "^11.0.0"
48494845

4846+
remark-mdx-remove-esm@^1.2.1:
4847+
version "1.2.2"
4848+
resolved "https://registry.yarnpkg.com/remark-mdx-remove-esm/-/remark-mdx-remove-esm-1.2.2.tgz#6901b691892c89d50abe35ad2fdec6c26af48091"
4849+
integrity sha512-YSaUwqiuJuD6S9XTAD6zmO4JJJZJgsRAdsl2drZO8/ssAVv0HXAg4vkSgHZAP46ORh8ERPFQrC7JWlbkwBwu1A==
4850+
dependencies:
4851+
"@types/mdast" "^4.0.4"
4852+
mdast-util-mdxjs-esm "^2.0.1"
4853+
unist-util-remove "^4.0.0"
4854+
48504855
remark-mdx@^3.0.0:
48514856
version "3.1.1"
48524857
resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-3.1.1.tgz#047f97038bc7ec387aebb4b0a4fe23779999d845"
@@ -5041,6 +5046,13 @@ semver@^7.6.0, semver@^7.7.1, semver@^7.7.3:
50415046
resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.3.tgz#4b5f4143d007633a8dc671cd0a6ef9147b8bb946"
50425047
integrity sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==
50435048

5049+
serialize-error@^12.0.0:
5050+
version "12.0.0"
5051+
resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-12.0.0.tgz#aed3d5abff192c855707513929bf8bf48d712194"
5052+
integrity sha512-ZYkZLAvKTKQXWuh5XpBw7CdbSzagarX39WyZ2H07CDLC5/KfsRGlIXV8d4+tfqX1M7916mRqR1QfNHSij+c9Pw==
5053+
dependencies:
5054+
type-fest "^4.31.0"
5055+
50445056
set-function-length@^1.2.2:
50455057
version "1.2.2"
50465058
resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
@@ -5579,6 +5591,11 @@ type-fest@^0.8.0:
55795591
resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
55805592
integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
55815593

5594+
type-fest@^4.31.0:
5595+
version "4.41.0"
5596+
resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-4.41.0.tgz#6ae1c8e5731273c2bf1f58ad39cbae2c91a46c58"
5597+
integrity sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==
5598+
55825599
typed-array-buffer@^1.0.3:
55835600
version "1.0.3"
55845601
resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz#a72395450a4869ec033fd549371b47af3a2ee536"
@@ -5675,13 +5692,6 @@ unist-util-find-after@^5.0.0:
56755692
"@types/unist" "^3.0.0"
56765693
unist-util-is "^6.0.0"
56775694

5678-
unist-util-is@^5.0.0:
5679-
version "5.2.1"
5680-
resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-5.2.1.tgz#b74960e145c18dcb6226bc57933597f5486deae9"
5681-
integrity sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==
5682-
dependencies:
5683-
"@types/unist" "^2.0.0"
5684-
56855695
unist-util-is@^6.0.0:
56865696
version "6.0.1"
56875697
resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-6.0.1.tgz#d0a3f86f2dd0db7acd7d8c2478080b5c67f9c6a9"
@@ -5703,14 +5713,14 @@ unist-util-position@^5.0.0:
57035713
dependencies:
57045714
"@types/unist" "^3.0.0"
57055715

5706-
unist-util-remove@^3.1.0:
5707-
version "3.1.1"
5708-
resolved "https://registry.yarnpkg.com/unist-util-remove/-/unist-util-remove-3.1.1.tgz#8bfa181aff916bd32a4ed30b3ed76d0c21c077df"
5709-
integrity sha512-kfCqZK5YVY5yEa89tvpl7KnBBHu2c6CzMkqHUrlOqaRgGOMp0sMvwWOVrbAtj03KhovQB7i96Gda72v/EFE0vw==
5716+
unist-util-remove@^4.0.0:
5717+
version "4.0.0"
5718+
resolved "https://registry.yarnpkg.com/unist-util-remove/-/unist-util-remove-4.0.0.tgz#94b7d6bbd24e42d2f841e947ed087be5c82b222e"
5719+
integrity sha512-b4gokeGId57UVRX/eVKej5gXqGlc9+trkORhFJpu9raqZkZhU0zm8Doi05+HaiBsMEIJowL+2WtQ5ItjsngPXg==
57105720
dependencies:
5711-
"@types/unist" "^2.0.0"
5712-
unist-util-is "^5.0.0"
5713-
unist-util-visit-parents "^5.0.0"
5721+
"@types/unist" "^3.0.0"
5722+
unist-util-is "^6.0.0"
5723+
unist-util-visit-parents "^6.0.0"
57145724

57155725
unist-util-stringify-position@^4.0.0:
57165726
version "4.0.0"
@@ -5719,14 +5729,6 @@ unist-util-stringify-position@^4.0.0:
57195729
dependencies:
57205730
"@types/unist" "^3.0.0"
57215731

5722-
unist-util-visit-parents@^5.0.0:
5723-
version "5.1.3"
5724-
resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz#b4520811b0ca34285633785045df7a8d6776cfeb"
5725-
integrity sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==
5726-
dependencies:
5727-
"@types/unist" "^2.0.0"
5728-
unist-util-is "^5.0.0"
5729-
57305732
unist-util-visit-parents@^6.0.0:
57315733
version "6.0.2"
57325734
resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz#777df7fb98652ce16b4b7cd999d0a1a40efa3a02"
@@ -5810,7 +5812,7 @@ [email protected]:
58105812
core-util-is "1.0.2"
58115813
extsprintf "^1.2.0"
58125814

5813-
vfile-matter@^5.0.0:
5815+
vfile-matter@^5.0.1:
58145816
version "5.0.1"
58155817
resolved "https://registry.yarnpkg.com/vfile-matter/-/vfile-matter-5.0.1.tgz#3f701840dde13c68d72d5c5ebd9cf233dff84419"
58165818
integrity sha512-o6roP82AiX0XfkyTHyRCMXgHfltUNlXSEqCIS80f+mbAyiQBE2fxtDVMtseyytGx75sihiJFo/zR6r/4LTs2Cw==
@@ -5826,7 +5828,7 @@ vfile-message@^4.0.0:
58265828
"@types/unist" "^3.0.0"
58275829
unist-util-stringify-position "^4.0.0"
58285830

5829-
vfile@^6.0.0, vfile@^6.0.1:
5831+
vfile@^6.0.0, vfile@^6.0.3:
58305832
version "6.0.3"
58315833
resolved "https://registry.yarnpkg.com/vfile/-/vfile-6.0.3.tgz#3652ab1c496531852bf55a6bac57af981ebc38ab"
58325834
integrity sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==

0 commit comments

Comments
 (0)