集成外部服务
将 Next.js 后端连接到第三方 API 和服务，以扩展应用功能。
集成外部服务 是 CoddyKit 上的免费 Next.js 15 Fullstack Web Apps 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Next.js 15 Fullstack Web Apps 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Next.js 15 Fullstack Web Apps 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Connect Your App to the World
Modern web applications rarely exist in isolation. They often need to interact with other services to provide rich features.
- Payment Gateways: Stripe, PayPal.
- Authentication: Auth0, Clerk.
- Data Services: Weather APIs, stock prices.
- Email & SMS: SendGrid, Twilio.
Integrating these external services expands your app's capabilities immensely!
Your Next.js Backend Hub
In Next.js, the ideal place for making server-side calls to external APIs is within Route Handlers.
Route Handlers run on the server, meaning your API keys and sensitive logic stay secure and are never exposed to the client (browser).
They act like your own custom backend API endpoints.
Fetching Data with `fetch()`
The standard way to make network requests in JavaScript, including in Next.js Route Handlers, is using the built-in fetch() API.
For a basic GET request, you just need the URL. Let's try fetching some public data!
async function getJoke() {
try {
const response = await fetch('https://api.chucknorris.io/jokes/random');
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
console.log("Chuck Norris Joke:");
console.log(data.value);
} catch (error) {
console.error("Failed to fetch joke:", error);
}
}
getJoke();Guarding Your Credentials
When integrating with most external services, you'll need an API Key or secret.
Never hardcode these directly in your code or expose them to the client-side! This is a major security risk.
Instead, store them as environment variables, typically in a .env.local file in your project root.
Accessing Secure Keys
Next.js automatically loads environment variables from .env.local. You can access them in your server-side code (like Route Handlers) using process.env.YOUR_VARIABLE_NAME.
Remember, variables prefixed with NEXT_PUBLIC_ are exposed to the browser, so avoid this for secrets!
// .env.local
EXTERNAL_API_KEY=your_super_secret_key_123
// In a Route Handler (e.g., app/api/data/route.js)
import { NextResponse } from 'next/server';
export async function GET() {
const apiKey = process.env.EXTERNAL_API_KEY;
if (!apiKey) {
return NextResponse.json({ error: 'API Key not configured' }, { status: 500 });
}
// Use apiKey in your fetch call
// const response = await fetch(`https://api.external.com/data?key=${apiKey}`);
return NextResponse.json({ message: 'API Key accessed successfully!' });
}Submitting Data to Services
Often, you need to send data to an external service, not just receive it. This is typically done with a POST request.
With fetch(), you specify the method: 'POST', set headers (especially 'Content-Type': 'application/json'), and include your data in the body, usually as a JSON string.
async function sendData() {
const postData = {
title: 'New Post from CoddyKit',
body: 'This is a test post sent to an external service.',
userId: 1,
};
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(postData),
});
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const result = await response.json();
console.log("Post created successfully:");
console.log(result); // The external service often returns the created item
} catch (error) {
console.error("Failed to send data:", error);
}
}
sendData();When Things Go Wrong
External services can fail due to network issues, invalid data, rate limits, or server errors. Your application needs to handle these gracefully.
- Always wrap
fetchcalls in atry...catchblock. - Check
response.ok(a boolean) to see if the HTTP status code was in the 200-299 range. - Handle different status codes (e.g., 401 Unauthorized, 404 Not Found, 500 Server Error) appropriately.
Smart Integration Strategies
To build reliable integrations, consider these best practices:
- Timeouts: Prevent your app from hanging indefinitely if an external service is slow.
- Retries: Implement a retry mechanism for transient errors (e.g., network glitches).
- Idempotency: Design your requests so that making the same request multiple times has the same effect as making it once (important for payments).
For complex scenarios, libraries like axios or node-fetch (for older Node versions) offer more features, but native fetch is often sufficient.
Check Your Understanding
It's crucial to securely handle sensitive information when interacting with external services.
Connecting Your App
You've learned how to integrate external services into your Next.js application.
- Route Handlers are your secure server-side gateway.
- The
fetch()API handles GET and POST requests. - Always use environment variables for API keys and keep them server-side.
- Implement robust error handling and consider best practices like timeouts and retries.
This skill is fundamental for building feature-rich, fullstack applications!
常见问题解答
「集成外部服务」课时是免费的吗？
是的 — 「集成外部服务」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Next.js 15 Fullstack Web Apps 课程的其余内容，请升级到 CoddyKit PRO。 Next.js 15 Fullstack Web Apps 课程共包含 4 节课。
「集成外部服务」这节课中我会学到什么？
将 Next.js 后端连接到第三方 API 和服务，以扩展应用功能。 你通过在浏览器中直接运行的动手代码来练习 Next.js 15 Fullstack Web Apps，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Next.js 15 Fullstack Web Apps 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Next.js 15 Fullstack Web Apps 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「集成外部服务」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Next.js 15 Fullstack Web Apps 课中编写并运行代码吗？
能。每节 Next.js 15 Fullstack Web Apps 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。