How to Use the Template 🚀

This guide will help you understand how to effectively use the Next.js template for your project. Let's get started! 🎉

1. Modify package.json 📝

Update the following fields in yourpackage.json file:

  • name: Your project name (e.g., my-awesome-app).
  • author: Your name or your organization's name.
  • description: A brief overview of what your project does.

2. Update constants/data.ts 📊

Change the data in constants/data.ts to match your application’s needs. Here’s what you should update:

  • APP_NAME: Set your project name.
  • AUTHORS: Include your name for credit.
  • KEYWORDS: List relevant keywords for better discoverability.
  • THEME_COLOR: Define the main theme color of your app (e.g., #ff5733).
  • ROUTES: Specify the main routes of your application for navigation.
  • ROBOTS: Update robots.txt settings if necessary to control indexing.

3. Use genPageMetadata 🗂️

Utilize the genPageMetadata function from seo.ts to generate page metadata. Ensure that your metadata aligns with your application. Pass parameters like title, description, image, and more.

4. Edit manifest.ts 🛠️

Change the shortcut, name, description, image, and other relevant details in your PWA manifest file.

5. Replace Favicon and Images 🖼️

Replace the favicon, OpenGraph, and other images in the public folder to customize the appearance of your app.

6. Set Up Environment Variables 🌐

Create separate environment variables for development and production:

  • Development: Set 
    NEXT_PUBLIC_BASE_URL= http://localhost:3000
  • Production: Set 
    NEXT_PUBLIC_BASE_URL= http://localhost:4000

7. Change PWA Config in next.config.js 🔧

Update the theme by modifying the CSS variables in your PWA configuration. This will help to ensure a cohesive look and feel.

8. Delete Unnecessary Files 🗑️

Clean up your project by removing any files that are not needed. This helps to keep your project organized and maintainable.

9. Change Theme in globals.css 🎨

Adjust your theme settings by changing the CSS variables in globals.css. Tailor the theme to fit your brand identity.

10. Explore the Project 🔍

Now, explore your project, make changes, and see them instantly reflected! Enjoy building! 🌟