Frontend Academy · レッスン

Nuxtモジュール：Image・Auth・i18n

最適化された画像のための@nuxt/image、認証のための@nuxtjs/auth-next、国際化のための@nuxtjs/i18nをインストールして設定します。

「Nuxtモジュール：Image・Auth・i18n」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Nuxtモジュールとは

モジュールはNuxtの公式拡張機構です。nuxt.config.tsにインストールし、ビルド、ランタイム、開発サーバーにフックします。エコシステムの機能の多くはモジュールとして提供されています。

モジュールのインストール

npmでモジュールをインストールし、nuxt.config.tsのmodulesに追加します。

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/image',
    '@sidebase/nuxt-auth',
    '@nuxtjs/i18n'
  ]
});

@nuxt/image

<img>を最適化された<NuxtImg>に置き換えます。自動フォーマット（WebP/AVIF）、レスポンシブなsrcset、遅延読み込み、CDN連携に対応しています。

<template>
  <NuxtImg
    src="/photos/sunset.jpg"
    alt="Sunset"
    width="800"
    height="600"
    format="webp"
    loading="lazy"
    sizes="sm:100vw md:50vw lg:800px"
  />
</template>

アートディレクション用のNuxtPicture

<NuxtPicture>は、アートディレクション用に複数の<source>タグを持つ<picture>要素を生成します。

<NuxtPicture src="/hero.jpg" alt="" :imgAttrs="{ width: 1200, height: 600 }" />

画像プロバイダーの設定

CDNプロバイダー（Cloudinary、imgix、Vercelなど）を設定すると、すべての画像をそのプロバイダー経由で配信できます。

export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    provider: 'cloudinary',
    cloudinary: { baseURL: 'https://res.cloudinary.com/yourname/image/fetch/' }
  }
});

@sidebase/nuxt-auth（認証）

複数のプロバイダーに対応する認証モジュールです。NextAuth互換のOAuth、ローカル認証情報、カスタムフローを利用できます。

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@sidebase/nuxt-auth'],
  auth: {
    baseURL: process.env.AUTH_ORIGIN,
    provider: { type: 'authjs' }
  }
});

ページでの認証の利用

useAuth()コンポーザブルは、セッション、ステータス、signIn/signOutを公開します。

<script setup>
const { data: session, status, signIn, signOut } = useAuth();
</script>

<template>
  <button v-if="status === 'unauthenticated'" @click="signIn('github')">
    Sign in with GitHub
  </button>
  <div v-else>
    Welcome, {{ session.user.name }}
    <button @click="signOut">Sign out</button>
  </div>
</template>

ミドルウェアによるルート保護

ページでauthミドルウェアを使用すると、認証を必須にできます。

<script setup>
definePageMeta({ middleware: 'auth' });
</script>

@nuxtjs/i18n（国際化）

公式のi18nモジュールは、複数言語、ロケール付きルート、翻訳ファイルの遅延読み込み、SEOに適したhreflangに対応しています。

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: [
      { code: 'en', file: 'en.json' },
      { code: 'tr', file: 'tr.json' }
    ],
    defaultLocale: 'en',
    lazy: true,
    langDir: 'locales/'
  }
});

コンポーネントでの翻訳

テンプレートでは$tを、setupではuseI18nを使用します。

<script setup>
const { t, locale } = useI18n();
</script>

<template>
  <h1>{{ $t('welcome') }}</h1>
  <p>{{ t('greeting', { name: 'Alice' }) }}</p>
  <button @click="locale = locale === 'en' ? 'tr' : 'en'">
    {{ $t('switch_lang') }}
  </button>
</template>

ロケール付きルート

URLは/en/aboutや/tr/aboutのようになります。localePath('/about')を使用すると、ロケールが正しく付いたリンクを生成できます。

<NuxtLink :to="localePath('/profile')">{{ $t('profile') }}</NuxtLink>

その他の人気モジュール

@pinia/nuxt（状態管理）、@vueuse/nuxt（200以上のコンポーザブル）、@nuxtjs/tailwindcss（Tailwindのセットアップ）、@nuxtjs/color-mode（ダークモード）、@nuxt/content（ファイルベースのCMS）があります。

カスタムモジュールの作成

社内モノレポの機能を共通化する場合は、Nuxtのライフサイクルにフックするモジュールを作成します。モジュールは強力で、コンポーネント、ランタイム設定、サーバールート、ビルド手順を登録できます。

理解度チェック

自動的なWebP/AVIF対応とレスポンシブなsrcsetを備えた、最適化された画像読み込みを提供するNuxt 3モジュールはどれですか。

まとめ：Nuxtモジュール

モジュールはNuxtを拡張する仕組みで、nuxt.config.tsのmodules配列からインストールします。@nuxt/imageは最適化された画像（自動フォーマット、srcset、遅延読み込み）を提供します。@sidebase/nuxt-auth（またはnuxt-auth）は認証用です。@nuxtjs/i18nは翻訳とロケール付きルート用です。そのほか、@pinia/nuxt、@vueuse/nuxt、@nuxtjs/tailwindcss、@nuxt/contentもあります。社内で再利用する機能にはカスタムモジュールを作成します。

よくある質問

「Nuxtモジュール：Image・Auth・i18n」レッスンは無料ですか？

はい。「Nuxtモジュール：Image・Auth・i18n」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「Nuxtモジュール：Image・Auth・i18n」で何を学びますか？

最適化された画像のための@nuxt/image、認証のための@nuxtjs/auth-next、国際化のための@nuxtjs/i18nをインストールして設定します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「Nuxtモジュール：Image・Auth・i18n」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る