contentlayerdev / next-contentlayer-example

Next.js Contentlayer Example

Demo

View the deployed project: Demo

Try it Now

Local Installation

Clone the project:

git clone [email protected]:contentlayerdev/next-contentlayer-example.git

Install dependencies:

yarn

Run dev server:

yarn dev

next-contentlayer-example's Issues

Use Stackblitz in the README

We're currently showing use with Gitpod, but should switch to Stackblitz, as that's what we're using elsewhere. See here.

MDX Image example

Hey it would be cool if we could get an MDX + image example here

Incorrect Tailwind config

I won't fork for such a small change.

Your tailwind.config.js is pointing to the pages folder, but you are implementing next's experimental app folder so no tailwind styling is being generated.

(...)
content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    (...)

Should be

(...)
content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    (...)

SyntaxError when running 'pnpm dev' command in the cloned repository.

When running the 'pnpm dev' command in the cloned repository, the following error occurs:

- error file:///C:/Users/baydis/Desktop/code/next-contentlayer-example/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@opentelemetry+core@1._vak64uwhuw23bp45xj3whrz3hy/node_modules/@effect-ts/otel/_mjs/Processor/Simple/index.mjs:7
import { ConsoleSpanExporter, SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
         ^^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'ConsoleSpanExporter' not found. The requested module '@opentelemetry/sdk-trace-base' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@opentelemetry/sdk-trace-base';
const { ConsoleSpanExporter, SimpleSpanProcessor } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
file:///C:/Users/baydis/Desktop/code/next-contentlayer-example/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@opentelemetry+core@1._vak64uwhuw23bp45xj3whrz3hy/node_modules/@effect-ts/otel/_mjs/Processor/Simple/index.mjs:7
import { ConsoleSpanExporter, SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
         ^^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'ConsoleSpanExporter' not found. The requested module '@opentelemetry/sdk-trace-base' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@opentelemetry/sdk-trace-base';
const { ConsoleSpanExporter, SimpleSpanProcessor } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

This error is related to the module '@opentelemetry/sdk-trace-base' and its named exports 'ConsoleSpanExporter' and 'SimpleSpanProcessor'. The error suggests that the requested module is a CommonJS module, which may not support importing named exports. Instead, it recommends importing via the default export.

Steps to Reproduce:

1. Clone the repository using the command: git clone https://github.com/contentlayerdev/next-contentlayer-example.git
2. Change directory to the cloned repository: cd next-contentlayer-example
3. Install dependencies using the package manager 'pnpm': pnpm i
4. Run the development server: pnpm dev

Expected Behavior:
The 'pnpm dev' command should run successfully without any syntax errors.

Actual Behavior:
The 'pnpm dev' command throws a SyntaxError related to the module '@opentelemetry/sdk-trace-base' and its named exports 'ConsoleSpanExporter' and 'SimpleSpanProcessor'. The error suggests importing via the default export instead.

Additional Information:

• The error message indicates that the issue may be caused by a compatibility problem between the CommonJS module and the import syntax used in the code.
• It is recommended to modify the import statements for the affected modules according to the suggestions provided in the error message to resolve the issue.

Example does not run on vercel edge?

Here is the repo:
https://github.com/yongyi520/contentlayer-example

I have cloned this repo and simply added
export const runtime = 'edge' // 'nodejs' (default) | 'edge'

on all pages

When I tried to deploy it to vercel, I got this issue:
EvalError: Code generation from strings disallowed for this context

Everything works fine on nodejs serverless, but when it's on edge it throws error somehow

Is there a workaround for this?

Use TypeScript

I converted this to JavaScript when adding the code for the getting started tutorial. As this becomes a richer example, let's use TypeScript.

The link if the example is broken

Hi @schickling ,

I tried to check the example but I got 404 :