Media Explorer

https://console.cloudinary.com/pm/c-566453371ff78610fec2e9abb08751/media-explorer

cloudinary.js

import { v2 as cloudinary } from 'cloudinary';

if (!process.env.CLOUDINARY_CLOUD_NAME) {
  throw new Error('CLOUDINARY_CLOUD_NAME is not set');
}

if (!process.env.CLOUDINARY_API_KEY) {
  throw new Error('CLOUDINARY_API_KEY is not set');
}

if (!process.env.CLOUDINARY_API_SECRET) {
  throw new Error('CLOUDINARY_API_SECRET is not set');
}

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

export async function uploadImage(image) {
  const imageData = await image.arrayBuffer();
  const mime = image.type;
  const encoding = 'base64';
  const base64Data = Buffer.from(imageData).toString('base64');
  const fileUri = 'data:' + mime + ';' + encoding + ',' + base64Data;
  const result = await cloudinary.uploader.upload(fileUri, {
    folder: 'nextjs-course-mutations',
  });
  return result.secure_url;
}

.env.local

CLOUDINARY_CLOUD_NAME=4324
CLOUDINARY_API_KEY=25466671243342462799
CLOUDINARY_API_SECRET=423412321


# CLOUDINARY_URL=cloudinary://<your_api_key>:<your_api_secret>@dmhbfjarf

다음 오류가 발생할 경우

Fast Refresh had to perform a full reload due to a runtime error.
 ⨯ node_modules\next-cloudinary\dist\index.mjs (1:1625) @ x
 ⨯ Internal error: Error: A Cloudinary Cloud name is required, please make sure NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME is set and configured in your environment.
    at x (./node_modules/next-cloudinary/dist/index.mjs:90:19)
    at v (./node_modules/next-cloudinary/dist/index.mjs:118:17)
    at B (./node_modules/next-cloudinary/dist/index.mjs:131:12)
    at loader (./node_modules/next-cloudinary/dist/index.mjs:194:22)
    at loader (./node_modules/next/dist/shared/lib/get-img-props.js:157:20)
    at getImgProps (./node_modules/next/dist/shared/lib/get-img-props.js:306:28)
    at eval (./node_modules/next/dist/client/image-component.js:274:82)

이 에러는 next-cloudinary 라이브러리를 사용하는 경우 발생할 수 있으며, Cloudinary 클라우드 이름이 환경 변수로 설정되지 않았기 때문입니다. 이를 해결하기 위해서는 NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME 환경 변수를 설정해야 합니다.

다음 단계를 따라서 환경 변수를 설정해 보세요:

1. 환경 변수 설정

프로젝트 루트에 .env.local 파일을 생성하고 다음 내용을 추가합니다

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloud_name

여기서 your_cloud_name은 Cloudinary 계정의 클라우드 이름입니다. Cloudinary 계정 설정에서 확인할 수 있습니다.

2. .env.local 파일을 Git에 커밋하지 않기

환경 변수 파일이 Git에 커밋되지 않도록 .gitignore 파일에 추가합니다.

.env.local

3. Next.js 서버 재시작

환경 변수를 설정한 후 Next.js 서버를 재시작해야 합니다:

npm run dev

전체 설정 예제

1. .env.local

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloud_name

2. next.config.js

기존 설정을 유지한 채로, 외부 호스트를 허용하도록 구성합니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['res.cloudinary.com'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
        pathname: '/**',
      },
    ],
  },
};

export default nextConfig;

예제 코드 수정

이미지를 표시하는 컴포넌트를 다음과 같이 수정합니다.

import Image from 'next/image';

const Post = ({ imageUrl, width, height }) => (
  <div>
    <Image
      src={imageUrl}
      alt="User uploaded image"
      width={width}
      height={height}
    />
  </div>
);

export default Post;

이 모든 단계를 완료한 후 Next.js 서버를 재시작하면 문제가 해결될 것입니다.

환경 변수를 설정하는 방법을 통해 next-cloudinary 라이브러리가 Cloudinary 클라우드 이름을 올바르게 인식하고, 이미지를 처리할 수 있습니다.

        <CldImage
            src="cld-sample-2"  width="100"  height="100" crop={{ type: 'auto', source: true }}
        />

https://console.cloudinary.com/pm/c-566453371ff78610fec2e9abb08751/getting-started

Cloudinary의 최적화 기능을 활용하여 Next.js의 이미지 최적화를 구현

1. 프로젝트 설정

먼저, .env.local 파일에 Cloudinary 클라우드 이름을 설정합니다

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloud_name

여기서 your_cloud_name은 Cloudinary 계정의 클라우드 이름입니다.

2. next.config.js 파일 설정

Cloudinary 도메인을 허용하도록 Next.js 설정을 업데이트합니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['res.cloudinary.com'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
        pathname: '/**',
      },
    ],
  },
};

export default nextConfig;

3. 이미지 로더 함수 정의

Cloudinary URL을 최적화하기 위해 이미지 로더 함수를 정의합니다.

const imageLoader = ({ src, width, quality }) => {
  const params = [
    `w_${width}`,
    `c_fill`,
    `q_${quality || 75}`
  ];
  const paramsString = params.join(',');
  const cloudinaryBase = `https://res.cloudinary.com/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload/`;

  // Split the src URL to insert the transformation parameters
  const [baseUrl, publicId] = src.split('/upload/');
  return `${cloudinaryBase}${paramsString}/${publicId}`;
};

4. 컴포넌트에서 이미지 로더 사용

이제 next/image 컴포넌트에서 loader 프로퍼티를 사용하여 이미지 로더를 적용합니다.

import Image from 'next/image';

const Post = ({ imageUrl, width, height }) => (
  <div>
    <Image
      src={imageUrl}
      alt="User uploaded image"
      width={width}
      height={height}
      loader={imageLoader}
      quality={50}
    />
  </div>
);

export default Post;

이렇게 하면 Next.js의 Image 컴포넌트가 Cloudinary URL을 최적화하여 이미지를 로드할 수 있습니다

5. 이미지 CSS 스타일 설정

추가적으로, 이미지의 크기를 CSS로 조정합니다. globals.css 파일을 다음과 같이 업데이트합니다.

/* globals.css */
img {
  width: 100%;
  height: auto;
}

이렇게 설정하면 이미지의 너비가 부모 요소의 너비에 맞춰지며, 높이는 자동으로 조정됩니다.

최종 정리

이제 Cloudinary의 URL을 최적화하여 이미지를 로드할 수 있습니다. 모든 설정을 완료한 후 Next.js 서버를 재시작하여 변경 사항을 적용합니다

npm run dev

이 과정에서는 Cloudinary의 이미지 최적화 기능을 활용하여 Next.js 애플리케이션에서 최적화된 이미지를 제공할 수 있습니다.

필요한 경우 이미지의 품질, 크기 등을 동적으로 조정할 수 있습니다.

~

function imageLoader(config) {
  const urlStart=config.src.split('upload/')[0];
  const urlEnd=config.src.split('upload/')[1];
  const transformations=`w_200,q_${config.quality}`;
  return `${urlStart}upload/${transformations}/${urlEnd}` ;
}


function Post({ post, action }) {
  return (
    <article className="post">
      <div className="post-image">
        <Image loader={imageLoader}   src={post.image} alt={post.title} fill    quality={50} />
        {/* <CldImage
            src={post.image}  width="100" height="100"  crop={{ type: 'auto', source: true }}
        />  */}



~