Remix vs Next.js comparison - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Remix loader function that fetches data.

Remix

export async function loader() {
  const data = await fetch('/api/data').then(res => res.[1]());
  return data;
}

Drag options to blanks, or click blank then click option'

Ahtml

Btext

Cjson

Dblob

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() instead of json() causes data parsing errors.

The json() method parses the response as JSON, which is common in Remix loaders.

2fill in blank

medium

Complete the Next.js code to fetch data inside getServerSideProps.

Remix

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.[1]();
  return { props: { data } };
}

Drag options to blanks, or click blank then click option'

Ajson

Btext

Cblob

DformData

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() leads to raw string data, not parsed objects.

Next.js uses json() to parse API responses as JSON inside getServerSideProps.

3fill in blank

hard

Fix the error in this Remix route component to use the correct hook for data loading.

Remix

import { [1] } from '@remix-run/react';

export default function Dashboard() {
  const data = [1]();
  return <div>{JSON.stringify(data)}</div>;
}

Drag options to blanks, or click blank then click option'

AuseLoaderData

BuseState

CuseEffect

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState or useEffect won't get server-loaded data.

useLoaderData is the Remix hook to access data returned from the loader function.

4fill in blank

hard

Fill the blank to define a Next.js API route handler that returns JSON data.

Remix

export default function handler(req, res) {
  res.[1]({ message: 'Hello from API' });
}

Drag options to blanks, or click blank then click option'

Astatus

Bjson

Csend

Dend

Attempts:

3 left

💡 Hint

Common Mistakes

Using res.send() instead of res.json() may send wrong content type.

Use res.json() to send JSON data in Next.js API routes.

5fill in blank

hard

Fill all three blanks to create a Remix form that submits data and handles the action.

Remix

import { Form, useActionData } from '@remix-run/react';

export async function action({ request }) {
  const formData = await request.[1]();
  const name = formData.get('[2]');
  return { message: `Hello, ${name}` };
}

export default function Greeting() {
  const data = useActionData();
  return (
    <Form method="post">
      <input type="text" name="[3]" aria-label="Name" />
      <button type="submit">Greet</button>
      {data && <p>{data.message}</p>}
    </Form>
  );
}

Drag options to blanks, or click blank then click option'

AformData

Bget

Cname

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using request.json() instead of request.formData() for form submissions.

Use request.formData() to get form data, then formData.get('name') to access the input value named 'name'.