Nextjs Starter

Overview

The Next.js Starter React Tests is a starter template for Next.js, a popular React framework. It includes features such as TypeScript, tailwindcss, and daisyUI. The template provides a home page screenshot and utilizes Next.js v13 with experimental “/app” support. It also includes example server-rendered components populated with data from a jokes API. The template simplifies the setup process by using npm and includes various additional features such as navigation, site layout, Jest, React Testing Library, GitHub action integration for running tests, Prettier configuration, a health check endpoint, and instructions for running tests locally.

Features

• Next.js v13 with experimental “/app” support
• Utilizes server components, client components, and layouts
• Example server-rendered component with data fetched from a jokes API
• Easy setup with npm and “create-next-app”
• Integration of tailwindcss and daisyUI for customizable styling
• Includes navigation, site layout, and two pre-built pages
• Jest and React Testing Library for efficient testing
• GitHub action integration for automated testing
• Prettier configuration for consistent code formatting
• Provides a health check endpoint for monitoring

Installation

To install the Next.js Starter React Tests template, follow these steps:

1. Open your terminal and navigate to the desired directory for the project.
2. Run the following command to create a new Next.js app using the template:

npx create-next-app nextjs-starter --ts

3. Once the app is created, navigate into the project directory:

cd nextjs-starter

4. Install the required dependencies, including tailwindcss and daisyUI:

npm install tailwindcss daisyui

5. Add the necessary configuration files for tailwindcss:

npx tailwindcss init -p

6. Edit the “tailwind.config.js” file and replace the contents with the following:

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [require('daisyui')],
}

7. Open the “styles/globals.css” file and replace the contents with the following:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import 'daisyui/dist/full.css';

8. Delete the default “styles/Home.module.css” file and create a new file in the same directory called “styles/Home.tsx”.
9. Paste the following code into the “styles/Home.tsx” file:

import React from 'react';

const HomeStyles = () => (
  <style jsx global>{`
    // Your custom styles here
  `}</style>
);

export default HomeStyles;

10. Replace the contents of the “pages/index.tsx” file with the following code:

import React, { useEffect, useState } from 'react';

const Home = () => {
  const [joke, setJoke] = useState('');
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.jokesapi.com/japi/random')
      .then((response) => response.json())
      .then((data) => {
        setJoke(data.joke);
        setIsLoading(false);
      });
  }, []);

  return (
    <div>
      {isLoading ? (
        <p>Loading...</p>
      ) : (
        <p>{joke}</p>
      )}
    </div>
  );
};

export default Home;

11. Delete the default “pages/api” directory and create a new file in the same directory called “pages/api/health.ts”.
12. Paste the following code into the “pages/api/health.ts” file:

import { NextApiRequest, NextApiResponse } from 'next';

export default function handler(_: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ status: 'OK' });
}

13. Finally, run the application locally using the following command:

npm run dev

14. Open your browser and go to http://localhost:3000 to see the result. You can also run the tests using the following command:

npm run test

Summary

The Next.js Starter React Tests template is a comprehensive starter template for Next.js web applications. It includes various features such as server components, client components, layouts, and integration with popular libraries like TypeScript, tailwindcss, and daisyUI. The template simplifies the setup process and provides example code for fetching data from APIs, running tests, and configuring additional functionalities like health check endpoints. With its intuitive installation guide and extensive list of features, the Next.js Starter React Tests template is a great option for developers looking to start their Next.js projects efficiently.