vercel / nextjs-planetscale-nextauth-tailwindcss-template

Admin dashboard template.

Next.js 14 Admin Dashboard Template

Built with the Next.js App Router

Demo · Clone & Deploy

Overview

This is a starter template using the following stack:

• Framework - Next.js 14
• Language - TypeScript
• Auth - NextAuth.js
• Database - Postgres
• Deployment - Vercel
• Styling - Tailwind CSS
• Components - Shadcn UI
• Analytics - Vercel Analytics
• Formatting - Prettier

This template uses the new Next.js App Router. This includes support for enhanced layouts, colocation of components, tests, and styles, component-level data fetching, and more.

Getting Started

During the deployment, Vercel will prompt you to create a new Postgres database. This will add the necessary environment variables to your project.

Inside the Vercel Postgres dashboard, create a table based on the schema defined in this repository.

CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  email VARCHAR(255) NOT NULL,
  name VARCHAR(255),
  username VARCHAR(255)
);

Insert a row for testing:

INSERT INTO users (id, email, name, username) VALUES (1, '[email protected]', 'Me', 'username');

Copy the .env.example file to .env and update the values.

Finally, run the following commands to start the development server:

pnpm install
pnpm dev

You should now be able to access the application at http://localhost:3000.

nextjs-planetscale-nextauth-tailwindcss-template's Issues

Getting dependency errors

While trying to install nextjs & react in the project, so I can then run npm run dev, I get the following error:

~/nextjs-planetscale-nextauth-tailwindcss-template main > npm install next react react-dom
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR!   next@"13.2.2-canary.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^12.2.5 || ^13" from [email protected]
npm ERR! node_modules/next-auth
npm ERR!   next-auth@"^4.19.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/joaqo/.npm/_logs/2023-03-12T16_11_16_596Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/joaqo/.npm/_logs/2023-03-12T16_11_16_596Z-debug-0.log
~/nextjs-planetscale-nextauth-tailwindcss-template main >

I am a js newb so this is probably my fault somehow. I am running a fresh install of node v18.15.0 (apart from npm install -g typescript-language-server typescript pyright).

Newer packages of tremor components require "use client"

Route: 'Playground'
Looks like the grid component in the newest version of tremor breaks the page if you don't specify 'use client'

"@tremor/react": "^3.0.1",

NextAuth issues

I tried signing in and get an HTTP GET not supported by NextAuth.js error

Login page get 404

When clicking the login button on the navbar, it gets undefined on the URL and receives a 404 page.

Type error when deploying Next.js site to Vercel: "Property 'onClick' does not exist on type 'Disclosure.Button'"

I encountered the following error when deploying my Next.js website to Vercel:

Type error: Type '{ children: string; onClick: () => Promise<undefined>; className: string; }' is not assignable to type 'IntrinsicAttributes & CleanProps<"button", ButtonPropsWeControl> & OurProps<"button", ButtonRenderPropArg> & { ...; } & { ...; }'.
  Property 'onClick' does not exist on type 'IntrinsicAttributes & CleanProps<"button", ButtonPropsWeControl> & OurProps<"button", ButtonRenderPropArg> & { ...; } & { ...; }'.
  ...

The error seems to be related to a type mismatch between the props passed to a component and the types expected by the component. Specifically, the error indicates that the onClick property does not exist on the Disclosure.Button component

Any guidance on how to resolve this issue would be greatly appreciated. Thank you

Why LICENSE.md instead of LICENSE?

t

Add Other Providers

Is it possible to add other providers than just GitHub?

Admin

Dash

Code: DEPLOYMENT_NOT_FOUND

When deploying app, all seems to be working. When I then sign in with Github, i get this error:

404: NOT_FOUND
Code: DEPLOYMENT_NOT_FOUND
ID: arn1::7b9cd-1702853365073-ff67a4ed498d

Can someone please help!

Upgrade nextjs version

Update to app dir

not startable.

when i clone the repo and do pnpm i and then pnpm dev i'll get this:

event - compiled client and server successfully in 570 ms (2663 modules)
warn  - Fast Refresh had to perform a full reload due to a runtime error.
[next-auth][warn][EXPERIMENTAL_API] 
`getServerSession` is used in a React Server Component. 
https://next-auth.js.org/configuration/nextjs#getServerSession} 
https://next-auth.js.org/warnings#EXPERIMENTAL_API
[next-auth][warn][NEXTAUTH_URL] 
https://next-auth.js.org/warnings#nextauth_url
[next-auth][warn][NO_SECRET] 
https://next-auth.js.org/warnings#no_secret
error - TypeError: fetch failed
error - TypeError: fetch failed
digest: "2809600469"

on render...

Error Trying to Run Template After Initial Config

After following the README instructions and trying to run the template in Web Storm with pnpm dev and with Planet Scale details in .env.local it's throwing:

  ▲ Next.js 13.5.5-canary.2
  - Local:        http://localhost:3000
  - Environments: .env.local

 ✓ Ready in 3.7s
 ○ Compiling /page ...
 ✓ Compiled /page in 8.8s (1196 modules)
 ⨯ Internal error: TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
 ⨯ Internal error: TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
digest: "2026204822"
 ✓ Compiled /favicon.ico/route in 2.8s (865 modules)

This seems very similar to #5 however,

1. I had already manually created the database and test row. I had also populated .env.local and followed all other instructions in the README.

2. I tried downgrading next to 13.2.4 from 13.5.5. as mentioned in the prior Issue, but it did not resolve the problem

Browser console:

Uncaught Error: fetch failed
5 [react-server-dom-webpack-client.browser.development.js:1679](webpack://_N_E/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js?945e)
    resolveErrorDev react-server-dom-webpack-client.browser.development.js:1679
    processFullRow react-server-dom-webpack-client.browser.development.js:1734
    processBinaryChunk react-server-dom-webpack-client.browser.development.js:1862
    progress react-server-dom-webpack-client.browser.development.js:1941
    (Async: promise callback)
    progress react-server-dom-webpack-client.browser.development.js:1942
    (Async: promise callback)
    progress react-server-dom-webpack-client.browser.development.js:1942
    (Async: promise callback)
    progress react-server-dom-webpack-client.browser.development.js:1942
    (Async: promise callback)
    progress react-server-dom-webpack-client.browser.development.js:1942
    (Async: promise callback)
    progress react-server-dom-webpack-client.browser.development.js:1942
    (Async: promise callback)
    progress react-server-dom-webpack-client.browser.development.js:1942
    (Async: promise callback)
    progress react-server-dom-webpack-client.browser.development.js:1942
    (Async: promise callback)
    progress react-server-dom-webpack-client.browser.development.js:1942
    (Async: promise callback)
    progress react-server-dom-webpack-client.browser.development.js:1942
    (Async: promise callback)
    progress react-server-dom-webpack-client.browser.development.js:1942
    (Async: promise callback)
    startReadingFromStream react-server-dom-webpack-client.browser.development.js:1949
    createFromReadableStream react-server-dom-webpack-client.browser.development.js:1954
    useInitialServerResponse app-index.js:116
    ServerRoot app-index.js:127
    renderWithHooks react-dom.development.js:10730
    mountIndeterminateComponent react-dom.development.js:15768
    beginWork$1 react-dom.development.js:17352
    beginWork react-dom.development.js:25701
    performUnitOfWork react-dom.development.js:24552
    workLoopConcurrent react-dom.development.js:24538
    renderRootConcurrent react-dom.development.js:24494
    performConcurrentWorkOnRoot react-dom.development.js:23358
    workLoop scheduler.development.js:261
    flushWork scheduler.development.js:230
    performWorkUntilDeadline scheduler.development.js:534
    (Async: EventHandlerNonNull)
    <anonymous> scheduler.development.js:569
    <anonymous> scheduler.development.js:630
    NextJS 4
    <anonymous> index.js:6
    NextJS 4
    <anonymous> react-dom.development.js:27
    <anonymous> react-dom.development.js:36891
16:30:11.393
The above error occurred in the <NotFoundErrorBoundary> component:

NotFoundErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/not-found-boundary.js:54:9
NotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/not-found-boundary.js:62:62
DevRootNotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:24
ReactDevOverlay@webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9
HotReload@webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:294:37
Router@webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/app-router.js:157:93
ErrorBoundaryHandler@webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/error-boundary.js:82:9
ErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/error-boundary.js:110:53
AppRouter@webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/app-router.js:440:47
ServerRoot@webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/app-index.js:126:24
RSCComponent
Root@webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/app-index.js:142:24

React will try to recreate this component tree from scratch using the error boundary you provided, ReactDevOverlay.

I have this issue both locally and on Vercel. I noticed on Vercel some part of the error mentioning SSL versions.

I made my own isolated test version of page.tsx which uses Planet Scale.

Long story short...

 {
  cause: [Error: 8046A44AF87F0000:error:0A00010B:SSL routines:ssl3_get_record:wrong version number:../deps/openssl/openssl/ssl/record/ssl3_record.c:355:
  ] {
    library: 'SSL routines',
    reason: 'wrong version number',
    code: 'ERR_SSL_WRONG_VERSION_NUMBER'
  }
}

Node.js v18.16.0

So... it's SSL related? I tried changing mysql to mysqls in the DATABASE_URL but no luck. However, I can use mysql on a terminal to connect to Planet Scale with my DATABASE_URL.

In that test file if I use mysql2 instead then it works:

const mysql = require('mysql2/promise');

async function testConnection() {
  const connection = await mysql.createConnection({
    host: 'aws.connect.psdb.cloud',
    user: 'myusername',
    database: 'mydb',
    password: 'your-password-here',
    ssl: {
      // Do not do this in production!!!
      // Or if you do, be sure to add your own value to checkServerIdentity to check the server's cert against.
      rejectUnauthorized: false
    }
  });

  try {
    const [rows, fields] = await connection.execute('SELECT * FROM `users`');
    console.log(rows);
  } catch (error) {
    console.error('Error executing query:', error);
  } finally {
    await connection.end();
  }
}

testConnection();

yielding:
[ { id: 1, email: '[email protected]', name: 'Me', username: 'username' } ]

feature request - docs on how to get this app working locally?

Playing with the up and struggling to make it work on my local mac, would be cool if there would be any docs for that

Deleted `.env` example

Looks like you deleted the example .env file in 5399727

Could you add a protected route and page example?

Could you add a protected route and page example?

Application error: a client-side exception has occurred

Digest: 2721087

`[Error] Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.

(anonymous function) (159-0e028925908dd0d6.js:1:3426)
ln (c93363e4-1a27167c75e65095.js:9:51367)
(anonymous function) (c93363e4-1a27167c75e65095.js:9:51720)
nf (c93363e4-1a27167c75e65095.js:9:27872)
nd (c93363e4-1a27167c75e65095.js:9:27965)
av (c93363e4-1a27167c75e65095.js:9:68621)
ak (c93363e4-1a27167c75e65095.js:9:69271)
aD (c93363e4-1a27167c75e65095.js:9:79905)
ak (c93363e4-1a27167c75e65095.js:9:68946)
aD (c93363e4-1a27167c75e65095.js:9:79905)
ak (c93363e4-1a27167c75e65095.js:9:68946)
aD (c93363e4-1a27167c75e65095.js:9:79905)
ak (c93363e4-1a27167c75e65095.js:9:68946)
aD (c93363e4-1a27167c75e65095.js:9:79905)
ak (c93363e4-1a27167c75e65095.js:9:68946)
aD (c93363e4-1a27167c75e65095.js:9:79905)
ak (c93363e4-1a27167c75e65095.js:9:68946)
aD (c93363e4-1a27167c75e65095.js:9:79905)
ak (c93363e4-1a27167c75e65095.js:9:69619)
aD (c93363e4-1a27167c75e65095.js:9:79905)
ak (c93363e4-1a27167c75e65095.js:9:69315)
(anonymous function) (c93363e4-1a27167c75e65095.js:9:102685)
oU (c93363e4-1a27167c75e65095.js:9:103213)
oE (c93363e4-1a27167c75e65095.js:9:88288)
ok (c93363e4-1a27167c75e65095.js:9:87462)
ok
E (159-0e028925908dd0d6.js:25:1400)
C (159-0e028925908dd0d6.js:25:1953)`

This is off of a clean deployment from Vercel's dashboard and all env are in place.

Readme would be nice

Hi,

ive cloned and deployed the repo via vercel and it does not start.
I assume, that i need to put some information in the .env file.
(and update nextjs to a stable version?)

However a small readme would be nice.
The project seems like a nice starter - but is not usable for me

"During the deployment, Vercel will prompt you to create a new Postgres database" this does not happen

There is no prompt to create a new database during deployment.

These are the actions that need to be done to have a working deployment + local development:

1. Click on the Deploy button on the template page on vercel.
2. Completing the 3 steps:
   2.1 Creating a Repository.
   2.2 Adding 3 env variables.
   -- Github /oauth project: The user must create one if one doesn't exist. if one does exist, make sure that the Homepage URL and the Authorization callback URL are set correctly (not sure what is correctly setting it to the deployment URL also navigates there when logging in on a local env.)
   2.3 Deploy
   -- After deployment is completed, the app is broken.
3. Now the user must create a Postgres DB under the project (in Vercel)
   -- This solves the issue that brakes the app, but it require an additional deployment (I'm not aware of a "rebuild" button)
4. The user should now clone the repository.
5. Rename .env.local.example to .env.local and copy all the env variables to it from the project settings page on Vercel (https://vercel.com/[USER_NAME]/admin-dashboard-tailwind-postgres-react-nextjs/settings/environment-variables).
6. Commit and push that change (this will trigger a rebuild and the app will work)
7. Running pnpm install + pnpm dev

I guess that for many devs, most of it is obvious and doesn't require explanation, but for people (like myself) that take their first step with NextJS/Oauth/Postgres, these details instructions could be helpful to make this awsome template more reachable.

I don't mind opening a PR to update the README file.