Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fun117/nextjs-rich-tpl

This project is a Next.js template aimed at providing a robust starting point for building modern web applications. It comes with pre-configured localization support, theme toggling, and various other features to streamline development.
https://github.com/fun117/nextjs-rich-tpl

autoprefixer framer-motion i18n lucide-icons next-intl next-themes nextjs rich tailwindcss template vercel-hosting

Last synced: 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/fun117/nextjs-rich-tpl
Owner: Fun117
License: mit
Created: 2024-06-21T07:28:27.000Z (8 months ago)
Default Branch: main
Last Pushed: 2024-12-09T03:35:08.000Z (2 months ago)
Last Synced: 2024-12-09T04:25:29.036Z (2 months ago)
Topics: autoprefixer, framer-motion, i18n, lucide-icons, next-intl, next-themes, nextjs, rich, tailwindcss, template, vercel-hosting
Language: TypeScript
Homepage: https://nextjs-rich-tpl.vercel.app
Size: 2.15 MB
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 8
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md

Awesome Lists containing this project

README

        


  

    

      

      

    

    
Next.js Rich Template


  





  

    

  

  

    

  

  

    

  





  

    

  

  

    

  





  

  

  





  

  



# Next.js Rich Template

This project provides a robust starting point for building modern web applications using Next.js. It includes pre-configured localization support, theme toggling, and various other features to streamline development.

## Key Features

- **Theme Switching**: Supports both light and dark modes using `next-themes`.

- **i18n (Internationalization)**: Multi-language support using `next-intl`.

- **Sitemap**: Automatically generated for improved SEO.

- **Responsive Design**: Built with Tailwind CSS to ensure responsiveness across devices.

- **Optimized Performance**: Leveraging modern web standards for enhanced performance.

## Getting Started

To begin using this template, follow these steps:

1. Clone the repository.

2. Install the dependencies: `npm install` or `yarn install`.

3. Start the development server: `npm run dev` or `yarn dev`.

## Project Overview

See a live preview of this template [here](https://nextjs-rich-tpl.vercel.app).

## Deploy Your Own

You can deploy the template on Vercel or preview it with StackBlitz:

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/Fun117/nextjs-rich-tpl/tree/main/examples/app/with-i18n-routing&project-name=nextjs-rich-tpl&repository-name=nextjs-rich-tpl)

## How to Use

To bootstrap a project, use the CLI:

### Installation

You can globally install `nextjs-rich-tpl` using the following command:

```bash

npm install -g nextjs-rich-tpl

```

### How to Use the CLI

To create a project, run the following command:

```bash

npx nextjs-rich-tpl

```

When you run the command, the following steps will be displayed:

1. Select the Next.js template to use

2. Enter the project name

3. Create the project and install dependencies

Deploy to the cloud using [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) (see the official [documentation](https://nextjs.org/docs/deployment)).

# Contributing

We welcome contributions to enhance the documentation or the project itself. Contributors will be acknowledged in this README. Please check our [GitHub repository](https://github.com/fun117/nextjs-rich-tpl) for more details on how to contribute.

# Acknowledgments

Special thanks to the Next.js community and open-source projects that inspired and supported this template.

# Contact

For questions or contributions, please reach out via the [this site](https://fun117.dev/en/contacts).

---

# Documentation

### 1. `richtpl.tsx` Setup Guide

1. **Place `richtpl.tsx` at the root of your project**

Place the template configuration file `richtpl.tsx` in the root of your project. This file configures the internationalization and theme settings of the site.

```typescript

export default {

  title: "My Project",

  tagline: "The best project ever!",

  url: "https://myproject.com",

  organizationName: "MyOrganization",

  projectName: "my-project",

  i18n: {

    defaultLocale: "en",

    locales: ["en", "ja"],

    localeConfigs: {

      en: { label: "English", htmlLang: "en", path: "en" },

      ja: { label: "日本語", htmlLang: "ja", path: "ja" },

    },

  },

  themeConfig: {

    colorMode: {

      defaultMode: "light",

      selectSwitch: true,

    },

    header: {

      title: "My Project",

      logo: {

        href: "/",

        type: "Vercel&Next.js",

      },

    },

    footer: {

      title: "My Footer",

      social: {

        github: true,

        twitter: "my_twitter_handle",

      },

    },

  },

};

```

2. **i18n Configuration**

- `defaultLocale` specifies the default language used.

- `locales` defines an array of supported languages, while `localeConfigs` provides settings for each language.

- The `path` sets the URL prefix. For example, the Japanese page will be redirected to `/ja`.

3. **Theme Settings**

- `colorMode` controls the switching between dark mode and system-based themes.

- The `header` and `footer` sections configure the logo and navigation in the site's header and footer.

### 2. `middleware.ts` Setup Guide

1. **Locale Middleware Setup**

To enable internationalization using `next-intl`, configure locale handling in `middleware.ts`. This middleware applies the appropriate language settings based on the URL.

```typescript

import createMiddleware from "next-intl/middleware";

import { locales, localePrefix, pathnames } from "@/components/provider/nav";

import richtplConfig from "../richtpl.config";

import { NextRequest, NextResponse } from "next/server";

const intlMiddleware = createMiddleware({

  locales,

  localePrefix,

  pathnames,

  defaultLocale: richtplConfig.i18n.defaultLocale,

});

export function middleware(request: NextRequest) {

  let response = intlMiddleware(request);

  if (!response) {

    response = NextResponse.next();

  }

  response.headers.set("x-pathname", request.nextUrl.pathname);

  return response;

}

export const config = {

  matcher: ["/", `/(ja|en)/:path*`],

};

```

2. **Matcher Configuration**

- The `matcher` defines the URL patterns processed by the middleware. The pattern `/(ja|en)/:path*` covers both English and Japanese pages.

- If other languages are added, they must be included in the `matcher` as well.

### Example of Theme Switching and i18n Implementation

```typescript

import { useState } from "react";

import { useTheme } from "next-themes";

import { useTranslations } from "next-intl";

export default function Header() {

  const { theme, setTheme } = useTheme();

  const t = useTranslations("Header");

  return (

    

      
{t("title")}

       setTheme(theme === "light" ? "dark" : "light")}>

        {theme === "light" ? "dark mode" : "light mode"}

      

    

  );

}

```

- This code implements a button to toggle themes and displays i18n-supported text.

### FAQ

#### Q: How can I add other languages?

A: To add a new language, update the `i18n` configuration in `richtpl.tsx` by adding the language to the `locales` array and providing corresponding settings in `localeConfigs`. Additionally, update the `matcher` in `middleware.ts` to include the new language.

#### Q: How can I customize theme switching?

A: You can customize the default theme and toggle options in the `themeConfig.colorMode` settings. Additionally, you can dynamically switch themes using the `useTheme` hook.