This is a Next.js boilerplate project bootstrapped with create-next-app.

Features

• Next.js 14 (App Router)
• TypeScript
• Panda CSS
• Auth.js
• JSON Server
• Tanstack Query
• React Hook Form
• Motion
• React Icons

Getting Started

First, run the development server:

cp .env.example .env
yarn install
yarn prepare

yarn dev

(Optional) Run the server to get the data from the json-server:

yarn server

Key	Description	Example
NEXTAUTH_URL	Service URL (usually domain)	http://localhost:4000
NEXTAUTH_SECRET	Random secret key	random secret in web
NEXT_PUBLIC_DOMAIN	Domain	http://localhost:4000
NEXT_PUBLIC_API_URL	API URL (json-server url in example)	http://localhost:4001

Open http://localhost:4000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Project Structure

Refer to the Next.js Best Practices for the project structure.

VScode Snippets

tsx

import { sva } from '@/styled-system/css';
import { Box } from '@/styled-system/jsx';

interface ITestProps {
  children?: React.ReactNode;
}

const Test = ({ children }: ITestProps) => {
  const testStyle = TestSva();
  return (
    <Box className={testStyle.wrapper}>
      <Box>{children}</Box>
    </Box>
  );
};

export default Test;

const TestSva = sva({
  slots: ['wrapper'],
  base: {
    wrapper: {
      display: 'block',
    },
  },
});