From 41996762deebd2f7fa25aa2805b7339c9a5c8a17 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <s.sdorra@gmail.com>
Date: Sat, 31 Aug 2024 22:44:46 +0200
Subject: [PATCH] docs(next): #257 add tabs for all kinds of next.js
 configuration

Closes: #257
---
 docs/adapter/next.mdx    | 39 +++++++++++++++++++++++++++++++++++----
 docs/quickstart/next.mdx | 33 ++++++++++++++++++++++++++++++++-
 2 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/docs/adapter/next.mdx b/docs/adapter/next.mdx
index 40b33201..5bfc7595 100644
--- a/docs/adapter/next.mdx
+++ b/docs/adapter/next.mdx
@@ -43,6 +43,22 @@ After installation we have to add a path alias for the generated collections to
 
 Now we can add the Content Collections plugin to the Next.js config:
 
+<Tabs groupId="typof-next-config" items={["next.config.mjs", "next.config.js", "next.config.ts"]} persist>
+<Tab value="next.config.mjs">
+
+```js
+import { withContentCollections } from "@content-collections/next";
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // your next.js config
+};
+
+export default withContentCollections(nextConfig);
+```
+</Tab>
+<Tab value="next.config.js">
+
 ```js
 const { withContentCollections } = require("@content-collections/next");
 
@@ -53,6 +69,21 @@ const nextConfig = {
 
 module.exports = withContentCollections(nextConfig);
 ```
+</Tab>
+<Tab value="next.config.ts">
+
+```ts
+import type { NextConfig } from "next";
+import { withContentCollections } from "@content-collections/next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default withContentCollections(nextConfig);
+```
+</Tab>
+</Tabs>
 
 <Callout type="warn" title="Warning">
 
@@ -104,7 +135,7 @@ The function accepts one argument, an options object with the following properti
 #### Example
 
 ```js
-const { createContentCollectionPlugin } = require("@content-collections/next");
+import { createContentCollectionPlugin } from "@content-collections/next";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -115,7 +146,7 @@ const withPlugin = createContentCollectionPlugin({
   configPath: "./config/content-collections.config.ts",
 });
 
-module.exports = withPlugin(nextConfig);
+export default withPlugin(nextConfig);
 ```
 
 ### `withContentCollections`
@@ -125,12 +156,12 @@ The function takes a single argument, a Next.js configuration object, and return
 #### Example
 
 ```js
-const { withContentCollections } = require("@content-collections/next");
+import { withContentCollections } from "@content-collections/next";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   // your next.js config
 };
 
-module.exports = withContentCollections(nextConfig);
+export default withContentCollections(nextConfig);
 ```
diff --git a/docs/quickstart/next.mdx b/docs/quickstart/next.mdx
index f88c39f7..61e0f193 100644
--- a/docs/quickstart/next.mdx
+++ b/docs/quickstart/next.mdx
@@ -42,7 +42,23 @@ This is necessary because we will generate the files in the `.content-collection
 </div>
 <div className="step">
 
-Modify your `next.config.js`:
+Modify your Next.js configuration:
+
+<Tabs groupId="typof-next-config" items={["next.config.mjs", "next.config.js", "next.config.ts"]} persist>
+<Tab value="next.config.mjs">
+
+```js
+import { withContentCollections } from "@content-collections/next";
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // your next.js config
+};
+
+export default withContentCollections(nextConfig);
+```
+</Tab>
+<Tab value="next.config.js">
 
 ```js
 const { withContentCollections } = require("@content-collections/next");
@@ -54,6 +70,21 @@ const nextConfig = {
 
 module.exports = withContentCollections(nextConfig);
 ```
+</Tab>
+<Tab value="next.config.ts">
+
+```ts
+import type { NextConfig } from "next";
+import { withContentCollections } from "@content-collections/next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default withContentCollections(nextConfig);
+```
+</Tab>
+</Tabs>
 
 This will add content collections to the build of your next.js app.
 For more details on the Next.js adapter, refer to the [documentation](/docs/adapter/next).