Appearance

Next.js ​

You should create a Page component using the App Router conventions as the main entry point of your Next.js application. Your Next.js code should be linted using ESLint with the recommended configuration for React and Next.js.

Entry file ​

This template follows the Next.js App Router layout. The solution files are:

  • src/app/page.jsx — the route component you implement (the Page).
  • src/app/layout.jsx — the root layout that wraps every page (preloaded, read-only).
  • next.config.js — the framework config (preloaded, read-only).

A src/app/globals.css file is preloaded for styles.

Version ​

Running on Node.js v20.0.0

Supported languages ​

Javascript

Testing framework ​

Vitest

Special reminders and implementation details ​

  • App Router files are React Server Components by default. They run on the server and have no access to browser APIs, state, or effects. Add the 'use client' directive at the top of the file to make a component a Client Component when you need state, effects, or event handlers.
  • The seeded test imports the Page directly and renders it with @testing-library/react — useful for asserting on the rendered markup without spinning up the full Next.js runtime.
  • Keep route segments under src/app/ and name files using Next.js conventions (page.jsx, layout.jsx, loading.jsx, error.jsx, not-found.jsx).

Example with React Testing Library: ​

jsx
import { render, screen } from '@testing-library/react';
import Page from './src/app/page';

describe('Page', () => {
  test("renders 'Hello, World!'", () => {
    render(<Page />);
    expect(screen.getByText('Hello, World!')).toBeInTheDocument();
  });
});

Included libraries ​

How to debug ​

Debugging Next.js is similar to debugging React/JavaScript. Use console.log() inside Client Components or utility functions to inspect values at runtime.

Steps to Debug Using Console Logs ​

  1. Identify the Problem Area: Pinpoint the component, hook, or route handler you suspect is misbehaving.

  2. Insert console.log() Statements: Add log calls before and after suspicious code. Remember that Server Components log to the server console — only Client Components ('use client' at the top of the file) log to the browser console.

  3. Check the Results Output of your tests

  4. Use Debug Icon in Preview Area: Click on the debug icon in the Preview area to check the console output, or open your browser's DevTools console.

  5. Analyze the Output: Compare logs against the rendered UI to spot stale state, incorrect props, or unexpected re-renders.

Here's an example of how to use console.log() for debugging in Next.js:

jsx
'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    console.log('Button clicked, current count:', count); // Log button click
    setCount(count + 1);
  };

  console.log('Current count:', count); // Log on every render

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}