【Next.js】基礎から始めるNext.js API Routes 【２５Login Test】

Next.js is a popular JavaScript framework that allows you to build server-side rendered React applications with ease. One of the key features of Next.js is its API Routes, which allow you to create powerful serverless functions that can handle API requests.

In this article, we will start from the basics and learn how to use Next.js API Routes to create a simple login test. By the end of this tutorial, you will have a better understanding of how to use Next.js API Routes to build powerful backend functionality for your applications.

Creating a Next.js Project

Before we can start working with Next.js API Routes, we need to create a new Next.js project. To do this, we can use the following commands in our terminal:

“`html
npm init next-app my-next-js-app
cd my-next-js-app
npm run dev
“`

This will initialize a new Next.js project and start the development server. Once the server is running, you can access your Next.js application by visiting http://localhost:3000 in your web browser.

Creating an API Route

Now that we have our Next.js project set up, let’s create our API route. Inside the pages/api directory of your Next.js project, create a new file called login.js. This will be our API route that handles login requests.

“`html
// pages/api/login.js

export default function handler(req, res) {
if (req.method === ‘POST’) {
// Process the login request
const { username, password } = req.body;
// Perform validation and authentication
// …
// Return the result
res.status(200).json({ success: true, message: ‘Login successful’ });
} else {
res.status(405).json({ success: false, message: ‘Method not allowed’ });
}
}
“`

In this example, we have created a simple API route that handles POST requests to the /api/login endpoint. When a POST request is received, our handler function will process the login request and return a success message if the validation and authentication process is successful. If the request method is not POST, we will return a 405 Method Not Allowed error.

Testing the Login API Route

To test our login API route, we can create a simple form in our Next.js application that sends a POST request to our API route. Here’s an example of how we can create the form:

“`html
// pages/index.js

import { useState } from ‘react’;

export default function Home() {
const [username, setUsername] = useState(”);
const [password, setPassword] = useState(”);

const handleSubmit = async (e) => {
e.preventDefault();
const response = await fetch(‘/api/login’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({ username, password }),
});
const data = await response.json();
console.log(data);
};

return (

);
}
“`

In this example, we have created a simple form that allows the user to input their username and password. When the form is submitted, a POST request is sent to our login API route with the username and password in the request body. We then log the response data to the console.

Conclusion

Next.js API Routes are a powerful feature that allows you to build backend functionality for your Next.js applications with ease. In this article, we have learned how to create a simple login test using Next.js API Routes. By understanding and mastering this feature, you can build powerful serverless functions that handle API requests for your applications.

With the knowledge gained from this tutorial, you can now start experimenting and building more complex API routes for your Next.js applications. Happy coding!