JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 18
  • Score
    100M100P100Q43082F
  • License MIT

This is a template set up to create Next.js App with fast speed and high performance<br/> The current template is provided in a **page routing** structure.<br/>

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (create-next-app-template) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    create-next-app-template

    This is a template set up to create Next.js Apps with fast speed and high performance
    The current template is provided with a Page Route structure

    Preview: You can check it here☝🏻

    Getting Started

    npx create-next-app-template my-app
cd my-app
npm run dev

    Main Libraries Used

    • Language: Typescript
    • State: Recoil
    • Asynchronous State: TanStack Query v5
    • Api: Axios
    • Style(Css): Emotion/react
    • Authentication: NextAuth
    • Bundler Doctor: bundle-analyzer
    • SVG: @svgr/webpack
    • Layout: dble-layout

    Design System (Widgets)

    🗂️ Path: src > @widgets

    These are widget templates that help with development
    They will take responsibility for your UI experience and work efficiency
    🔥 Design UI widgets will be continuously updated and added in the future

    Themes

    🗂️ Root: src > lib > themes

    🔥 These are style elements that help you quickly complete your UI

    • globalStyles: Manages styles that need to be set up by default globally
    • colors: A collection of sensible design colors
    • fontSize: Provides each font size in rem format
    • media: MediaQuery in a format that can be used immediately in CSS for each device's aspect ratio
    • styleSheet: StyleSheet for applying quick classes and emotion css

    Utils

    🗂️ Root: src > lib > utils

    🔥 These are various utility functions that help with front-end development

    • enum: A collection for managing pre-set key, value in enum form

    • regEx: e.g., regEx.email.test(email) << A collection of frequently used regular expressions in a form that can be used immediately

    • scrollToRef: You can focus on the scroll position

    Custom Hooks

    🔎 Preview Custom Hooks ☝🏻

    🗂️ Path: src > lib > hooks

    🔥 These are a collection of custom hooks that help with development
    Custom hooks will be continuously updated!

    SEO Optimization and Sitemap Generation Method

    I'll tell you how to optimize and set up SEO, and how to create and set up dynamic and static sitemaps
    🔥 This is an important part of exposing your website to search engines, so it's highly recommended to handle it!

    🙏🏻 Precautions Before Deployment

    Before deployment, please check and modify the following content appropriately, then build

    1. Enter your web service information in src > libs > site > site.ts

    2. Enter your website menu information in src > libs > site > menus.ts

    3. Modify and check next-sitemap.config.js according to your web service content

    4. Modify the app content, which is PWA information, in public > manifest.json

    5. (Optional) You can create an RSS in page > api > rss.ts >> Modify the content appropriately

    6. Process the npm run build command

    7. Sitemap information will be generated and deployed to public