Next.js 2021: 'Savior' of the Front-End World?

Next.js: Is “Next” the Next Step for React? 🤔

Hey folks! 👋 Today, I’m going to talk about a front-end “secret weapon” called Next.js. If you’ve worked with React, you’ve probably heard of it. So what is Next.js? Is it better than React? And why are devs so excited about it? Let’s dive in!

Next.js: React’s “Sibling”

First things first, Next.js is not React’s competitor. It’s a framework built on top of React that makes React development smoother and more efficient. Think of React as an F1 car 🏎️, and Next.js as the top-notch team of engineers that make sure the car runs smoothly and hits its top speed.

Why Next.js? What Does It Add to React?

What makes Next.js such a hit? Here’s why so many front-end developers love it:

1. Server-Side Rendering (SSR) and Static Site Generation (SSG): Top-Notch SEO 🚀

This is Next.js’s “secret weapon.” Instead of having the browser render the entire page (like traditional React), Next.js renders the page on the server and sends the complete HTML to the browser. This gives two big benefits:

• Super fast loading: The user sees the content immediately, rather than waiting for JavaScript to load and render the page. This improves user experience (UX).
• Excellent SEO: Search engines (like Google) can easily read and index the content of your page, boosting your SEO ranking.

Example: Let’s say you’re building a blog. With SSR, whenever a user visits a post, Next.js renders it on the server and sends a fully rendered HTML page to the client. This is faster and better for SEO than waiting for JavaScript to load.

Next.js also supports Static Site Generation (SSG), which is great for pages with content that doesn’t change often, like blogs, portfolios, or landing pages.

2. Automatic Routing: Say Goodbye to Configuring Routes! 🛣️

In React, you need to configure routing using libraries like react-router-dom. Next.js makes this simpler—it automatically creates routes based on the pages directory structure.

Example:

• React: You need to manually configure routes with react-router-dom like this:

  import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
  import Home from "./Home";
  import About from "./About";
  
  function App() {
    return (
      <Router>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Router>
    );
  }
  

• Next.js: Just create pages/index.js and pages/about.js, and Next.js automatically sets up the routes / and /about.

  // pages/index.js
  function Home() {
    return <h1>Home Page</h1>;
  }
  
  export default Home;
  
  // pages/about.js
  function About() {
    return <h1>About Page</h1>;
  }
  
  export default About;
  

No need for complex setup, saving you tons of time!

3. API Routes: Full-Stack in Your Hands! 🔥

Next.js lets you create API routes directly in your app, inside the pages/api folder. This means you can handle backend tasks (like querying a database or processing logic) inside Next.js, without needing a separate server. Super convenient, right?

Example:

// pages/api/hello.ts
import type { NextApiRequest, NextApiResponse } from "next";
type Data = {
  name: string;
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ name: "John Doe" });
}

Now you can access this API at /api/hello.

4. Built-in CSS Support: Smooth Styling! 🎨

Next.js supports CSS Modules, Styled JSX, and even Sass, making it easier to manage styles and avoid CSS conflicts.

Example with CSS Modules:

/* styles.module.css */
.container {
  text-align: center;
  padding: 20px;
  background-color: #f0f0f0;
}

.title {
  font-size: 24px;
  color: #333;
}

// pages/index.tsx
import styles from "../styles.module.css";

function Home() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Welcome to My Next.js App</h1>
    </div>
  );
}

export default Home;

Next.js vs React: “Same Same But Different”

Here’s a quick comparison between Next.js and React:

Key Differences Explained:

• Rendering:

  • React (CSR): The page is rendered on the client using JavaScript.
  • Next.js (SSR, SSG, CSR): Can render on the server (SSR) or generate static pages (SSG) at build time.

• Routing:

  • React (react-router-dom): You manually configure routes.
  • Next.js: Automatically creates routes based on the pages directory.

• SEO:

  • React (CSR): Not SEO-friendly since search engines can’t read JavaScript-rendered content easily.
  • Next.js (SSR, SSG): The content is ready for search engines, improving SEO.

• Page Load Speed:

  • React (CSR): Slower as the browser has to load JavaScript first.
  • Next.js (SSR, SSG): Faster, since content is sent directly from the server.

What’s Missing in Next.js? 🤔

While Next.js is awesome, it still has some limitations:

• Node.js Dependency: You need Node.js for server-side rendering.
• Learning Curve: You’ll need to learn Next.js concepts and how to use them.
• Project Structure Complexity: With SSR, SSG, and API routes, your project structure may be more complex than with React alone.

But once you get the hang of it, you’ll be able to use all the powerful features Next.js offers.

Setting Up a Next.js Project: “Easy as Pie”! 🍭

To start a Next.js project, run the following commands (make sure you have Node.js and npm installed):

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

Open your browser and go to http://localhost:3000 to see the default Next.js page.

Next Steps:

1. Create new pages: Add new files in the pages directory. For example, create pages/about.js to automatically create the /about route.
2. Add CSS/Sass: Add CSS/Sass files in the styles folder and import them into your components.
3. Create API routes: Add files in the pages/api directory to create API endpoints.

Routing, Links, and Images: Smooth as Butter

Routing

As mentioned earlier, Next.js automatically creates routes based on the pages directory.

Link

Use Next.js’s Link component to navigate between pages without reloading.

Example:

import Link from "next/link";

function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/about">
        <a>About Us</a>
      </Link>
    </div>
  );
}

export default HomePage;

Image

Use the Image component to optimize images.

Example:

import Image from "next/image";

function MyComponent() {
  return (
    <div>
      <Image
        src="/profile.png"
        alt="Profile Picture"
        width={500}
        height={500}
      />
    </div>
  );
}

export default MyComponent;

Build Process and Optimization Techniques

Next.js uses Webpack and Babel to build your app. When you run npm run build, it:

• Compiles your code into optimized JavaScript.
• Generates HTML for static pages (SSG).
• Creates API routes (if any).
• Optimizes images (if using next/image).

Performance Optimization Techniques:

• Code-splitting: Breaks your code into smaller chunks, loading only what’s needed.
• Pre-fetching: Preloads pages that users are likely to visit.
• Caching: Stores rendered pages and static assets to speed up load times.

Example of Optimization:

If you have a blog app with many posts, the homepage will load quickly with Next.js, showing posts right away instead of waiting for JavaScript to load.

Conclusion: Next.js – The Front-End Developer’s Best Friend?

Next.js is a game-changer for front-end developers. With powerful features like SSR, SSG, automatic routing, and API routes, it makes React development easier, faster, and more efficient. If you’re looking to level up your React skills, Next.js is the way to go!

References:

• Next.js Official Documentation
• React.js Official Documentation
• Server-side Rendering vs. Static Site Generation
• Create a Next.js App

Bonus: Navigating and Getting the Most Out of Next.js

To fully harness the power of Next.js, here are some tips and tricks:

1. Use CSS Frameworks

Next.js works well with CSS frameworks like Tailwind CSS or Bootstrap, allowing for fast, flexible UI design.

Example with Tailwind CSS:

npm install -D tailwindcss
npx tailwindcss init -p

Add the configuration to tailwind.config.js:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Finally, import Tailwind in globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

2. Optimize Images

Next.js has a built-in image optimization feature. Using the Image component will reduce image size and improve page load speed.

Example:

import Image from "next/image";

function Banner() {
  return (
    <div>
      <Image
        src="/banner.jpg"
        alt="Banner"
        width={1200}
        height={800}
        layout="responsive"
      />
    </div>
  );
}

export default Banner;

3. Use API Routes

API routes allow you to create API endpoints directly in your Next.js app, removing the need for a separate backend.

Example:

// pages/api/users/[id].ts
import { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { id } = req.query;
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/users/${id}`
  );
  const data = await response.json();
  res.status(200).json(data);
}

Now you can access this API at /api/users/1 to get user data.

4. Keep Learning with Official Docs

The official docs are the best place to learn advanced Next.js features.

• Next.js API Reference
• Next.js Learn

Conclusion

Every tool has its strengths for different projects. If you’re looking for a powerful, easy-to-use framework with lots of useful features, Next.js is definitely a great choice.

Remember, growth as a developer isn’t just about mastering tools and frameworks; it’s about problem-solving, self-learning, and teamwork. Enjoy the journey and keep leveling up your skills!

P/S: Let’s look forward to the 📰 series Next.js updates through the years on the exact date of July 13th!!!🔥