api in the pages folder directory of your project.Inside the api folder, create a new file named hello.js.
export default function handler(req, res) {
res.status(200).json({ message: 'Hello from API!' });
}In Next.js, using the .module.css suffix for CSS files enables the CSS Modules feature. CSS Modules allow us to scope styles locally, preventing global naming conflicts. This means that the styles for each component are independent and only effective within that component, enhancing the maintainability and readability of the code.
Static site generation (SSG) is a type of pre-rendering that generates HTML at build time. This means that the HTML is generated at build time and sent to the client. This is different from dynamic rendering, where the HTML is generated on the server at request time.
To add head content to a NextJS page, we can use the Head component from the next/head package. Here's an example:
import Head from 'next/head';
function MyPage() {
return (
<div>
<Head>
<title>My Page Title</title>
<meta name="description" content="My page description" />
</Head>
<h1>My Page Content</h1>
</div>
);
}[] around a filename allows you to match dynamic segments, enabling parameters in URLs.index.js, which serves as the default page for a directory, or [...slug].js for catch-all routes.