Building Modern Websites with Next.js

Next.js has revolutionized how we build React applications by providing an intuitive framework that addresses common challenges in web development. With the introduction of the App Router in Next.js 13+, building performant, SEO-friendly websites has never been easier.

Why Next.js?

Next.js offers several key advantages for modern web development:

• Server Components: Write React components that render on the server for improved performance
• Streaming: Progressively send UI from the server to the client
• Built-in SEO optimization: Metadata API for better search engine visibility
• Zero-config support: TypeScript, ESLint, and other tools work out of the box
• Hybrid rendering: Choose between static, dynamic, or a mix based on your needs

Getting Started with Next.js App Router

The App Router provides a more intuitive file-based routing system. Here's a simple example:

// app/page.tsx - This is your home page
export default function Home() {
  return (
    <main>
      <h1>Welcome to my website</h1>
      <p>Built with Next.js App Router</p>
    </main>
  );
}

Data Fetching

Data fetching is simple and efficient with React Server Components:

// app/products/page.tsx
async function getProducts() {
  const res = await fetch('https://api.example.com/products');
  return res.json();
}
 
export default async function ProductsPage() {
  const products = await getProducts();
 
  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

Styling Options

Next.js supports various styling approaches:

• CSS Modules: Scoped CSS files
• Tailwind CSS: Utility-first CSS framework
• CSS-in-JS: Libraries like styled-components or emotion
• Sass: Built-in support for .scss and .sass files

Conclusion

Next.js continues to evolve, making it easier for developers to build modern, performant websites. The App Router takes the framework to the next level with intuitive patterns that align with how we conceptualize web applications.

Whether you're building a personal blog, an e-commerce site, or a complex web application, Next.js provides the tools you need to create exceptional user experiences.

and yes this whole site is vibe coded, Welcome to the future i guess :)