Getting Started

Next.js Setup

Install

npm install @edge-store/react

Environment Variables

.env

EDGE_STORE_ACCESS_KEY=your-access-key
EDGE_STORE_SECRET_KEY=your-secret-key

API Route

pages/api/edgestore/[...edgestore].ts

import EdgeStore from "@edge-store/react/next";

export default EdgeStore();

Provider

pages/_app.tsx

import { EdgeStoreProvider } from "@edge-store/react";

export default function App({ Component, pageProps }) {
  return (
    <EdgeStoreProvider>
      <Component {...pageProps} />
    </EdgeStoreProvider>
  );
}

Upload image

You can use the useEdgeStore hook to access the upload function. There are two available options for the upload function: uploadImage and uploadProtectedImage. Both work the same way, but uploadProtectedImage will only be accessible with a temporary token that is automatically generated by Edge Store from within your app.

import { useEdgeStore } from "@edge-store/react";

const Page = () => {
  const [file, setFile] = useState(null);
  const { uploadImage } = useEdgeStore();

  return (
    <div>
      <input type="file" onChange={(e) => setFile(e.target.files[0])} />
      <button
        onClick={async () => {
          const { url } = await uploadImage(file, {
            onProgressChange: (progress) => {
              console.log(progress);
            },
          });
          console.log(url);
        }}
      >
        Upload
      </button>
    </div>
  );
};

export default Page;

Show image

import { useEdgeStore } from "@edge-store/react";

const Page = () => {
  const { getImgSrc } = useEdgeStore();

  return (
    <div>
      <img src={getImgSrc("https://my-image-domain.com/path/to/image.jpg")} />
    </div>
  );
};