dmitry.galkin/chatbot-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Upgrade to Next.js 15.0.1 (#454)

Browse source
This commit is contained in:
Jared Palmer 2024-10-23 12:21:30 -04:00 • committed by GitHub
parent 00b125378c
commit ac2659255e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 4320 additions and 3538 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/(auth)/api/auth/[...nextauth]/route.ts
View file

@ -1 +1 @@
export { GET, POST } from "@/app/(auth)/auth";
export { GET, POST } from '@/app/(auth)/auth';

3
app/(chat)/chat/[id]/page.tsx
View file

@ -7,7 +7,8 @@ import { getChatById } from "@/db/queries";
import { Chat } from "@/db/schema";
import { convertToUIMessages, generateUUID } from "@/lib/utils";
export default async function Page({ params }: { params: any }) {
export default async function Page(props: { params: Promise<any> }) {
const params = await props.params;
const { id } = params;
const chatFromDb = await getChatById({ id });

56
app/layout.tsx
View file

@ -1,24 +1,62 @@
import { Metadata } from "next";
import { Toaster } from "sonner";
import { Metadata } from 'next';
import { Toaster } from 'sonner';
import { Navbar } from "@/components/custom/navbar";
import { ThemeProvider } from "@/components/custom/theme-provider";
import { Navbar } from '@/components/custom/navbar';
import { ThemeProvider } from '@/components/custom/theme-provider';
import "./globals.css";
import './globals.css';
export const metadata: Metadata = {
metadataBase: new URL("https://chat.vercel.ai"),
title: "Next.js Chatbot Template",
description: "Next.js chatbot template using the AI SDK.",
metadataBase: new URL('https://chat.vercel.ai'),
title: 'Next.js Chatbot Template',
description: 'Next.js chatbot template using the AI SDK.',
};
export const viewport = {
maximumScale: 1, // Disable auto-zoom on mobile Safari
};
const LIGHT_THEME_COLOR = 'hsl(0 0% 100%)';
const DARK_THEME_COLOR = 'hsl(240deg 10% 3.92%)';
const THEME_COLOR_SCRIPT = `\
(function() {
var html = document.documentElement;
var meta = document.querySelector('meta[name="theme-color"]');
if (!meta) {
meta = document.createElement('meta');
meta.setAttribute('name', 'theme-color');
document.head.appendChild(meta);
}
function updateThemeColor() {
var isDark = html.classList.contains('dark');
meta.setAttribute('content', isDark ? '${DARK_THEME_COLOR}' : '${LIGHT_THEME_COLOR}');
}
var observer = new MutationObserver(updateThemeColor);
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
updateThemeColor();
})();`;
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<html
lang="en"
// `next-themes` injects an extra classname to the body element to avoid
// visual flicker before hydration. Hence the `suppressHydrationWarning`
// prop is necessary to avoid the React hydration mismatch warning.
// https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app
suppressHydrationWarning
>
<head>
<script
dangerouslySetInnerHTML={{
__html: THEME_COLOR_SCRIPT,
}}
/>
</head>
<body className="antialiased">
<ThemeProvider
attribute="class"

9
components/custom/preview-attachment.tsx
View file

@ -12,18 +12,18 @@ export const PreviewAttachment = ({
const { name, url, contentType } = attachment;
return (
<div className="flex flex-col gap-2 max-w-16">
(<div className="flex flex-col gap-2 max-w-16">
<div className="h-20 w-16 bg-muted rounded-md relative flex flex-col items-center justify-center">
{contentType ? (
contentType.startsWith("image") ? (
// NOTE: it is recommended to use next/image for images
// eslint-disable-next-line @next/next/no-img-element
<img
(<img
key={url}
src={url}
alt={name ?? "An image attachment"}
className="rounded-md size-full object-cover"
/>
/>)
) : (
<div className=""></div>
)
@ -37,8 +37,7 @@ export const PreviewAttachment = ({
</div>
)}
</div>
<div className="text-xs text-zinc-500 max-w-16 truncate">{name}</div>
</div>
</div>)
);
};

14
components/custom/theme-toggle.tsx
View file

@ -1,28 +1,28 @@
"use client";
'use client';
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import { useTheme } from 'next-themes';
import { useEffect, useLayoutEffect, useState } from 'react';
export function ThemeToggle() {
const { setTheme, theme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => {
useLayoutEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return null;
return <div className="cursor-pointer" />;
}
return (
<div
className="cursor-pointer"
onClick={() => {
setTheme(theme === "dark" ? "light" : "dark");
setTheme(theme === 'dark' ? 'light' : 'dark');
}}
>
{`Toggle ${theme === "light" ? "dark" : "light"} mode`}
{`Toggle ${theme === 'light' ? 'dark' : 'light'} mode`}
</div>
);
}

9
next.config.mjs
View file

@ -1,9 +0,0 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {},
images: {
remotePatterns: [],
},
};
export default nextConfig;

10
next.config.ts Normal file
View file

@ -0,0 +1,10 @@
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
/* config options here */
images: {
remotePatterns: [],
},
};
export default nextConfig;

8
package.json
View file

@ -32,12 +32,12 @@
"framer-motion": "^11.3.19",
"geist": "^1.3.1",
"lucide-react": "^0.446.0",
"next": "15.0.0-canary.152",
"next-auth": "5.0.0-beta.22",
"next": "15.0.1",
"next-auth": "5.0.0-beta.25",
"next-themes": "^0.3.0",
"postgres": "^3.4.4",
"react": "19.0.0-rc-7771d3a7-20240827",
"react-dom": "19.0.0-rc-7771d3a7-20240827",
"react": "19.0.0-rc-45804af1-20241021",
"react-dom": "19.0.0-rc-45804af1-20241021",
"react-markdown": "^9.0.1",
"remark-gfm": "^4.0.0",
"server-only": "^0.0.1",

7469
pnpm-lock.yaml generated
View file

File diff suppressed because it is too large Load diff