Have you ever needed a simple way to capture screenshots of websites programmatically? In this article, we will help you build a Next.js app to take website screenshots effortlessly using screenshotapi.net. We will create an app with an input field for taking a website URL and displaying a screenshot of the website after clicking a button.
By the end of this tutorial, you will have built a Next.js app that:
To get started, create a new Next.js project using the following commands:
npx create-next-app website-screenshot
cd website-screenshot
To make HTTP requests, we will need to add an additional library called Axios.
npm install axios
In your project's pages folder, open the index.js file and update the code to include an input field for the website URL and a 'Capture Screenshot' button.
import React, { useState } from 'react';
import axios from 'axios';
export default function Home() {
const [url, setUrl] = useState('');
const handleCaptureScreenshot = async () => {
// API request to capture the screenshot will be added here
}
return (
<div>
<input
type="text"
value={url}
onChange={(e) => setUrl(e.target.value)}
placeholder="Enter website URL"
/>
<button onClick={handleCaptureScreenshot}>
Capture Screenshot
</button>
</div>
);
}
To capture website screenshots, you need to register at screenshotapi.net and obtain your API key from the dashboard.
Now, copy your API key and modify the handleCaptureScreenshot method accordingly:
const handleCaptureScreenshot = async () => {
const token = '<YOUR_API_KEY>';
const screenshotUrl = `https://shot.screenshotapi.net/screenshot?token=${token}&url=${url}`;
try {
const response = await axios.get(screenshotUrl);
console.log(response.data);
} catch (error) {
console.error('Failed to capture the screenshot', error);
}
};
The response.data should now contain a URL to the screenshot. You can display it using an img element.
To display the screenshot, update the Home component by adding a state variable to store the screenshot URL, and an img element to display it:
import React, { useState } from 'react';
import axios from 'axios';
export default function Home() {
const [url, setUrl] = useState('');
const [screenshotUrl, setScreenshotUrl] = useState('');
const handleCaptureScreenshot = async () => {
const token = '<YOUR_API_KEY>';
const requestUrl = `https://shot.screenshotapi.net/screenshot?token=${token}&url=${url}`;
try {
const response = await axios.get(requestUrl);
setScreenshotUrl(response.data);
} catch (error) {
console.error('Failed to capture the screenshot', error);
}
}
return (
<div>
<input
type="text"
value={url}
onChange={(e) => setUrl(e.target.value)}
placeholder="Enter website URL"
/>
<button onClick={handleCaptureScreenshot}>
Capture Screenshot
</button>
<img src={screenshotUrl} alt="Website screenshot" />
</div>
);
}
Yes, screenshotapi.net offers options such as output format, viewport size, and timeout. Visit their API documentation for more information.
Yes, screenshotapi.net allows you to provide authentication tokens or cookies for capturing screenshots from authenticated or restricted websites.
While this tutorial doesn't cover scheduling or automation, you can achieve this using cron jobs, serverless functions, or external services like Zapier or Integromat.
You now have a Next.js app that captures and displays website screenshots using screenshotapi.net. This functional app can be further improved by adding features like multiple website captures, custom options, and file persistence.
Do let us know if you have any questions or get stuck at any point during building this in the comments below.
