nextjs
nextjs things
Generate a New Project
npx create-next-app@latest
keeping-server-only-code-out-of-the-client-environment
keeping-server-only-code-out-of-the-client-environment
Adding next-themes for dark/light mode support to a NextJS App router project
https://www.rayterrill.com/2024/03/06/NextJSNextThemesAppRouter.html
Holy Grail Layout
layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<body className={inter.className}>
Header
{children}
</body>
);
}
page.tsx
import Image from "next/image";
export default function Home() {
return (
Content
);
}
Rendering Options
- Server data + Client side: grab all the data, allow users to view + manipulate it client side (table, search, etc). Using query string to do manipulations allows it to be linkable.
- Server side + server side: grab data, present it to the user. To see additional details, link them to another server “details” page that grabs the details they need for that item. Also allows it to be linkable.