### Run Development Server Commands
Source: https://github.com/hohoemi-rabo/post-craft/blob/main/README.md
Commands to start the development server for the Next.js project using different package managers like npm, yarn, pnpm, and bun. These commands initiate the local development environment.
```bash
npm run dev
yarn dev
pnpm dev
bun dev
```
--------------------------------
### Start Development Server with Package Managers
Source: https://context7.com/hohoemi-rabo/post-craft/llms.txt
These commands start the local development environment for the Next.js application with hot reload and Turbopack bundler. Choose the command that corresponds to your preferred package manager.
```bash
# Start development server on http://localhost:3000
npm run dev
# Alternative package managers
yarn dev
pnpm dev
bun dev
```
--------------------------------
### Build Production Bundle and Start Production Server
Source: https://context7.com/hohoemi-rabo/post-craft/llms.txt
These commands compile and optimize the Next.js application for deployment. The `build` command creates an optimized production bundle, and the `start` command launches the production server.
```bash
# Build optimized production bundle
npm run build
# Start production server after build
npm run start
# Expected output structure in .next/ directory:
# - Static pages pre-rendered
# - Optimized JavaScript bundles
# - Image optimization cache
```
--------------------------------
### Create Reusable React Components
Source: https://context7.com/hohoemi-rabo/post-craft/llms.txt
Building custom React components in the `src/components` directory with proper TypeScript typing and Tailwind styling. This example demonstrates creating a reusable Button component with different variants and applying it in a page.
```typescript
// src/components/Button.tsx
interface ButtonProps {
children: React.ReactNode;
onClick?: () => void;
variant?: 'primary' | 'secondary';
}
export default function Button({
children,
onClick,
variant = 'primary'
}: ButtonProps) {
const baseStyles = "rounded-full font-medium px-4 py-2 transition-colors";
const variantStyles = {
primary: "bg-foreground text-background hover:bg-[#383838]",
secondary: "border border-foreground hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a]"
};
return (
);
}
// Usage in page
import Button from '@/components/Button';
export default function Page() {
return ;
}
```
--------------------------------
### Create Next.js App Router Pages
Source: https://context7.com/hohoemi-rabo/post-craft/llms.txt
Examples of creating new routes by adding files in the `src/app` directory, following Next.js App Router conventions. This includes creating static pages, dynamic routes, and API endpoints.
```typescript
// src/app/about/page.tsx
export default function About() {
return (
);
}
```
--------------------------------
### Root Layout Component in Next.js with TypeScript
Source: https://context7.com/hohoemi-rabo/post-craft/llms.txt
This TypeScript code defines the root layout component for the Next.js application. It imports necessary modules, defines font configurations, sets metadata, and renders the basic HTML structure with font styles.
```typescript
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
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 (
{children}
);
}
```
--------------------------------
### Accessing Environment Variables in Next.js
Source: https://context7.com/hohoemi-rabo/post-craft/llms.txt
Demonstrates how to access environment variables within Next.js components and server-side code. Publicly exposed variables (NEXT_PUBLIC_*) are accessible in the browser, while all variables are available on the server.
```javascript
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
const dbUrl = process.env.DATABASE_URL;
const secret = process.env.SECRET_KEY;
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.