Add Next.js example

Author: Palbahngmiyine

examples/nextjs/.env.example

@@ -0,0 +1,2 @@
+SOLAPI_API_KEY=YOUR_API_KEY_HERE
+SOLAPI_API_SECRET=YOUR_API_SECRET_KEY_HERE

examples/nextjs/.gitignore

@@ -0,0 +1,44 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+# SOLAPI Setting
+.env
+
+# TODO: 예제를 내려받고 나선 아래의 항목을 주석 해제 해주세요!
+# .env*
+# next-env.d.ts

examples/nextjs/README.md

@@ -0,0 +1,43 @@
+# Next.js + SOLAPI SDK 예제
+
+## 예제를 내려받았을 때 최초 실행 동작
+
+예제를 내려받은 직후에는 아래와 같은 명령어를 입력해서 node_modules를 설치해주세요!
+
+```shell
+npm install
+# or
+yarn install
+# or
+pnpm install
+# or
+bun install
+```
+
+1. node_modules를 설치한 후에는 .env.example 파일을 .env로 변경해주세요!
+2. 바꾼 .env 파일로 들어가서 SOLAPI_API_KEY와 SOLAPI_API_SECRET의 값을 실제 사용하실 API Key, API Secret Key로 변경해주세요!
+
+```text
+// .env
+SOLAPI_API_KEY=YOUR_API_KEY_HERE
+SOLAPI_API_SECRET=YOUR_API_SECRET_KEY_HERE
+```
+
+## 실행해보기!
+
+실행을 위해 터미널 환경에서 아래와 같은 명령어를 입력해주세요!
+
+```shell
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+
+# 이후 localhost:3000 으로 접속해서 테스트를 진행하실 수 있습니다!
+```
+## 주의사항
+
+반드시 .env 파일에 등록 및 활성화하신 API Key, API Secret Key를 설정하셔야 합니다!

examples/nextjs/envConfig.ts

@@ -0,0 +1,4 @@
+import {loadEnvConfig} from '@next/env';
+
+const projectDir = process.cwd();
+loadEnvConfig(projectDir);

examples/nextjs/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

examples/nextjs/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

examples/nextjs/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "solapi-nextjs-examples",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@next/env": "^15.2.1",
+    "next": "15.2.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "solapi": "latest"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

examples/nextjs/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

examples/nextjs/public/example.jpg

@@ -0,0 +1,31 @@
+'use server';
+
+import '../../envConfig';
+import {BadRequestError, SolapiMessageService} from 'solapi';
+import {redirect} from 'next/navigation';
+
+export async function sendMessage(formData: FormData) {
+  if (!formData.has('from') || !formData.has('to') || !formData.has('text')) {
+    throw new BadRequestError(
+      '반드시 발신번호, 수신번호, 메시지 내용을 입력해주세요!',
+    );
+  }
+  const from = formData.get('from') as string;
+  const to = formData.get('to') as string;
+  const text = formData.get('text') as string;
+
+  const messageService = new SolapiMessageService(
+    process.env.SOLAPI_API_KEY!,
+    process.env.SOLAPI_API_SECRET!,
+  );
+
+  await messageService
+    .send({
+      from,
+      to,
+      text,
+    })
+    .then(console.log);
+
+  redirect('/?success=true');
+}