diff --git a/docs/blog/authors.json b/docs/blog/authors.json new file mode 100644 index 0000000..c633453 --- /dev/null +++ b/docs/blog/authors.json @@ -0,0 +1,48 @@ +{ + "authors": [ + { + "name": "CodeStorm Hub Team", + "role": "Core Team", + "bio": "The collective voice of the CodeStorm Hub community, sharing updates, announcements, and insights from our open-source journey.", + "avatar": "/images/codestorm-logo.png", + "social": { + "github": "https://github.com/CodeStorm-Hub", + "twitter": "#", + "linkedin": "#" + } + }, + { + "name": "Syed Salman Reza", + "role": "Founder & Lead Developer", + "bio": "Full-stack developer passionate about building scalable web applications and fostering open-source communities.", + "avatar": "/team-members/syed-salman-reza.jpg", + "social": { + "github": "https://github.com/syed-reza98", + "linkedin": "https://www.linkedin.com/in/salman-reza", + "twitter": "#" + } + }, + { + "name": "Development Team", + "role": "Technical Writers", + "bio": "Our development team shares technical insights, tutorials, and best practices from building modern web applications.", + "avatar": "/images/team-avatar.png", + "social": { + "github": "https://github.com/CodeStorm-Hub", + "twitter": "#", + "linkedin": "#" + } + }, + { + "name": "Community Team", + "role": "Community Managers", + "bio": "Dedicated to building and nurturing our open-source community through guidelines, support, and engagement.", + "avatar": "/images/community-avatar.png", + "social": { + "github": "https://github.com/CodeStorm-Hub", + "twitter": "#", + "linkedin": "#" + } + } + ] +} diff --git a/docs/blog/posts/getting-started-nextjs-radix.md b/docs/blog/posts/getting-started-nextjs-radix.md new file mode 100644 index 0000000..e892faa --- /dev/null +++ b/docs/blog/posts/getting-started-nextjs-radix.md @@ -0,0 +1,443 @@ +--- +title: "Getting Started with Next.js 15 and Radix UI: A Modern Web Development Stack" +description: "Learn how to build accessible, performant web applications using Next.js 15 and Radix UI - the stack powering CodeStorm Hub." +author: "Development Team" +date: "2025-10-13" +category: "Technical" +tags: ["nextjs", "radix-ui", "tutorial", "react", "web-development", "accessibility"] +featured: false +published: true +--- + +# Getting Started with Next.js 15 and Radix UI + +At CodeStorm Hub, we're always exploring modern technologies that help us build better applications. For our portfolio website, we chose Next.js 15 and Radix UI - a powerful combination that delivers excellent performance, developer experience, and accessibility. + +In this guide, we'll walk you through why we chose this stack and how to get started with it. + +## Why Next.js 15? + +Next.js has become the go-to framework for React applications, and version 15 brings significant improvements: + +### 1. App Router (Stable) +The App Router provides a new way to build applications with: +- Server Components by default for better performance +- Improved routing with layouts and templates +- Built-in loading and error states +- Streaming and Suspense support + +### 2. Turbopack +Next.js 15 includes Turbopack, a new bundler that's: +- Significantly faster than Webpack +- Optimized for both development and production +- Compatible with the existing Next.js ecosystem + +### 3. Enhanced Performance +- Improved image optimization +- Better font loading strategies +- Automatic static optimization +- Enhanced caching mechanisms + +### 4. Server Actions +Built-in support for server mutations without API routes: +```typescript +async function submitForm(formData: FormData) { + 'use server' + // Handle form submission +} +``` + +## Why Radix UI? + +Radix UI is a low-level UI component library that provides: + +### Unstyled Components +Components come without styling, giving you complete control over the design while maintaining excellent functionality and accessibility. + +### Accessibility Built-In +Every component follows WCAG guidelines and includes: +- Proper ARIA attributes +- Keyboard navigation +- Screen reader support +- Focus management + +### Composability +Build complex components by composing primitives: +```tsx + + + + + + + + + + + +``` + +### TypeScript Support +Full TypeScript support with excellent type definitions. + +## Setting Up Your Project + +Let's create a new project with Next.js 15 and Radix UI: + +### Step 1: Create a Next.js Application + +```bash +npx create-next-app@latest my-app +``` + +Select these options: +- TypeScript: Yes +- ESLint: Yes +- Tailwind CSS: Yes +- App Router: Yes +- Import alias: Yes (@/*) + +### Step 2: Install Radix UI + +Install the Radix UI components you need: + +```bash +npm install @radix-ui/react-dialog +npm install @radix-ui/react-dropdown-menu +npm install @radix-ui/react-navigation-menu +npm install @radix-ui/react-toast +``` + +### Step 3: Set Up Tailwind CSS + +Configure Tailwind for optimal styling: + +```typescript +// tailwind.config.ts +import type { Config } from 'tailwindcss' + +const config: Config = { + content: [ + './src/pages/**/*.{js,ts,jsx,tsx,mdx}', + './src/components/**/*.{js,ts,jsx,tsx,mdx}', + './src/app/**/*.{js,ts,jsx,tsx,mdx}', + ], + theme: { + extend: { + colors: { + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + }, + borderRadius: { + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)', + }, + }, + }, + plugins: [], +} +export default config +``` + +## Building Components with Radix UI + +Let's build a reusable dialog component: + +### Dialog Component + +```tsx +// components/ui/dialog.tsx +import * as DialogPrimitive from '@radix-ui/react-dialog' +import { cn } from '@/lib/utils' + +export function Dialog({ children, ...props }: DialogPrimitive.DialogProps) { + return ( + + {children} + + ) +} + +export function DialogTrigger({ className, ...props }: DialogPrimitive.DialogTriggerProps) { + return ( + + ) +} + +export function DialogContent({ className, children, ...props }: DialogPrimitive.DialogContentProps) { + return ( + + + + {children} + + + ) +} +``` + +### Using the Dialog + +```tsx +// app/page.tsx +import { Dialog, DialogTrigger, DialogContent } from '@/components/ui/dialog' + +export default function Home() { + return ( + + Open Dialog + +

Welcome

+

This is an accessible dialog built with Radix UI

+
+
+ ) +} +``` + +## Best Practices + +### 1. Server Components First +Use Server Components by default and only add 'use client' when needed: + +```tsx +// Server Component (default) +export default async function Page() { + const data = await fetchData() + return
{data}
+} + +// Client Component (when needed) +'use client' +export default function InteractiveComponent() { + const [state, setState] = useState() + return +} +``` + +### 2. Optimize Images + +Always use the Next.js Image component: + +```tsx +import Image from 'next/image' + +export function Hero() { + return ( + Hero image + ) +} +``` + +### 3. Implement Proper Loading States + +Use Suspense and loading.tsx for better UX: + +```tsx +// app/posts/loading.tsx +export default function Loading() { + return
Loading posts...
+} + +// app/posts/page.tsx +import { Suspense } from 'react' + +export default function PostsPage() { + return ( + }> + + + ) +} +``` + +### 4. Accessibility Checkers + +Add accessibility testing to your development workflow: + +```tsx +// Always provide meaningful alt text +CodeStorm Hub logo + +// Use semantic HTML + + +// Ensure proper focus management + +``` + +## Performance Optimization Tips + +### 1. Dynamic Imports + +Split large components: + +```tsx +import dynamic from 'next/dynamic' + +const HeavyComponent = dynamic(() => import('./HeavyComponent'), { + loading: () =>

Loading...

, + ssr: false, // Disable SSR for this component if needed +}) +``` + +### 2. Metadata API + +Optimize SEO with the Metadata API: + +```tsx +import type { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'My Page', + description: 'Page description', + openGraph: { + title: 'My Page', + description: 'Page description', + images: ['/og-image.jpg'], + }, +} +``` + +### 3. Font Optimization + +Use next/font for optimal font loading: + +```tsx +import { Inter } from 'next/font/google' + +const inter = Inter({ + subsets: ['latin'], + display: 'swap', +}) + +export default function RootLayout({ children }) { + return ( + + {children} + + ) +} +``` + +## Common Patterns + +### Form Handling with Server Actions + +```tsx +async function createPost(formData: FormData) { + 'use server' + + const title = formData.get('title') + const content = formData.get('content') + + // Save to database + await db.posts.create({ title, content }) + + revalidatePath('/posts') + redirect('/posts') +} + +export function NewPostForm() { + return ( +
+ +