Bear29ers/anime-vault

Next 14 Server Actions

In Next.js client components, fetching from client to server should be written as follows...

'use client';

async function requestUsername(formData) {
  const response = await fetch('some_url', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      // Add other headers as needed
    },
    body: JSON.stringify({
      username: formData.get('username');
      // Add other key-value pairs for your request payload
    }),
  });
}

export default function App() {
  return (
    <form action={requestUsername}>
      <input type="text" name="username" />
      <button type="submit">Request</button>
    </form>
  );
}

However, using server actions in Next.js 14 reduces the amount of code and allows you to focus more on business logic.

Furthermore, when considering API, you need to think about not only makeing requests from the client, but also listening to requests on the server.

In Next.js 14, you don't have to think about API, because Next.js automatically handle this.

'use client';

async function requestUsername(formData) {
  'use server';
  const username = formData.get('username');
  // ...
}

export default function App() {
  return (
    <form action={requestUsername}>
      <input type='text' name='username' />
      <button type='submit'>Request</button>
    </form>
  );
}

Anime Vault

A modern Next 14 server side Japanese anime list app with server actions, inifinite scroll & framer motion animations.

Deployed App

Prerequisite

Node.js 18.17.0 or later
A basic understanding of JavaScript and React

Cloning the repository

git clone https://github.com/Bear29ers/anime-vault.git

Install packages

npm install

Start the app

npm run dev

Bear29ers / anime-vault