コンテンツにスキップ
Clameyes
Blog

JavaScript

JavaScript” の投稿: 2 件

Astroを使っていてCould not find Sharp.エラーが出た時の対処法

Astroを使っていて「Could not find Sharp.」というエラーに対処したので備忘録です。

エラーの概要

Astroでビルド時に2種類のエラーが出ました。

このエラーは通常、Astroプロジェクトで画像の最適化を行おうとした際に発生し、Sharpライブラリが見つからないことが原因です。

解決方法

そのままですが、Sharpライブラリが見つからないというエラーなので、Sharpをインストールすることで解決できます。

以下の手順に従って進めてください。

  1. まず、Sharpをプロジェクトにインストールしましょう。

    Terminal window
    pnpm add sharp

  2. astro.config.mjsファイルで、Sharpが正しく設定されているか確認します。

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    

    export default defineConfig({
        image: {
            service: { entrypoint: 'astro/assets/services/sharp' },
        },
    });

  3. もし上記の手順で解決しない場合は、キャッシュをクリアしてみましょう。

    Terminal window
    pnpm store prune

  4. 最後に、依存関係を再インストールし、プロジェクトを再ビルドします。

    Terminal window
    pnpm install --force
    pnpm build

参考リンク

Next.jsのApp RouterでMarkdown(MDX)を使う方法

Next.jsは、Reactベースのフレームワークで、サーバーサイドレンダリングや静的サイト生成を簡単に実現できます。最近、App Routerが導入され、ルーティングの管理がより柔軟になりました。この記事では、Next.jsのApp Routerを使用してMarkdown(MDX)を利用する方法について解説します。

MDXとは？

MDXは、MarkdownとJSXを組み合わせたファイル形式です。Markdownのシンプルさを保ちながら、Reactコンポーネントを埋め込むことで、動的なコンテンツを持つ文書を簡単に作成できます。

Next.jsのセットアップ

まず、Next.jsプロジェクトを作成します。以下のコマンドを実行してください。

Terminal window
npx create-next-app@latest my-next-app
cd my-next-app

次に、MDXを使うために必要なパッケージをインストールします。

Terminal window
npm install @next/mdx @mdx-js/loader

MDXの設定

次に、Next.jsの設定ファイルであるnext.config.jsまたはnext.config.tsを更新します。以下のコードを追加してください。

next.config.js または next.config.ts
const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
})


module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
})

この設定により、MDXファイルをページとして扱うことができるようになります。

MDXファイルの作成

次に、pagesフォルダ内にpostsという新しいフォルダを作成し、その中にexample.mdxというファイルを作成します。以下は、example.mdxのサンプル内容です。

example.mdx
# MDXのサンプル


これはMDXファイルの例です。以下はReactコンポーネントの例です。


<MyComponent />


## セクション


このセクションでは、MDXの使い方について説明します。

コンポーネントの作成

次に、componentsフォルダを作成し、MyComponent.jsxまたはMyComponent.tsxというファイルを作成します。以下は、MyComponent.jsxのサンプル内容です。

MyComponent.jsx または MyComponent.tsx
const MyComponent = () => {
  return <div>これは埋め込まれたコンポーネントです。</div>
}


export default MyComponent;

ページの作成

最後に、pages/posts/example.jsxまたはpages/posts/example.tsxというファイルを作成し、以下のコードを追加します。

pages/posts/example.jsx または pages/posts/example.tsx
import Example from '../../posts/example.mdx'


const ExamplePage = () => {
  return <Example />
}


export default ExamplePage;

アプリの起動

すべての設定が完了したら、アプリを起動します。

Terminal window
npm run dev

ブラウザでhttp://localhost:3000/posts/exampleにアクセスすると、MDXファイルが正しく表示されることを確認できます。

まとめ

この記事では、Next.jsのApp RouterでMarkdown(MDX)を使う方法を紹介しました。MDXを使用することで、Markdownの利便性とReactコンポーネントの柔軟性を組み合わせて、よりリッチなコンテンツを作成できます。ぜひ、自分のプロジェクトでも活用してみてください。