Next.js

Next js blocks for Derived. Auth, dashboard, and more.

Back

Prerequisites

Derived Setup, skip this step if already done

Get started

Clone this repository

   git clone https://github.com/getderived-com/derived-nextjs.git

Template groups

Template groups are modules/blocks that you can add in your project using derived. You can import template groups using its code. Read more about template groups.

Below are some template groups that you can import in your project.

Better Auth Login (docs)

Import code:

better_auth_login_5205

This data source will be added to your project:

{
  "name": "specs",
  "fields": [
    {
      "required": true,
      "inputType": "email"
    },
    {
      "required": true,
      "inputType": "password",
      "minPasswordLength": 8
    }
  ],
  "githubLogin": true,
  "googleLogin": true,
  "redirectURL": "/dashboard",
  "discordLogin": true,
  "emailAndPassword": true
}

File Structure:

auth-card.tsx
middleware.ts
page.tsx
page.tsx
route.ts
auth-utils.ts
auth.ts
auth-client.ts

Layout

Import code:

dashboard_2024

File Structure:

user-profile.tsx
navbar.tsx
main.tsx
app-sidebar.tsx
site-header.tsx
section-cards.tsx
nav-main.tsx
chart-area-interactive.tsx
dashboard.page.tsx
data.json
page.tsx