Next.js_intro.md

Beginner Next.js Workshop Cheat Sheet

What is Next.js?

Next.js is a React framework that enables server-side rendering (SSR) and static site generation (SSG) along with hybrid applications, offering optimized performance and SEO compared to traditional React apps that use client-side rendering (CSR)¹.

Traditional React App: Client-Side Rendering (CSR)

• Client-Side Rendering (CSR): React apps render everything on the client side (browser).
• Cons:
  • Interactive React content may be invisible to social media bots and search engines².
  • Slower time to first contentful paint (when the first bit of content is rendered on the screen)³.

Next.js Approach

Next.js solves these issues by enabling Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR)¹.

• Server-Side Rendering (SSR): Content is pre-rendered on the server. When a bot or user requests a page, they get fully rendered HTML.
  • This improves SEO because search engines and bots can see pre-rendered content⁴.
  • After the user receives the page, the client-side React code takes over, making the page interactive⁵.

Advantages of Next.js over Traditional React (CSR)

1. SEO: Fully rendered content is visible to bots and search engines⁶.
2. Performance: SSR enables a faster time to first contentful paint³.
3. Routing: Next.js has a built-in router that is file-based⁷.

Routing in Next.js

• File-based routing: Next.js uses the file structure to define routes⁷.
  • Example: If you create a file at pages/tree/branch.js, you can access it via example.com/tree/branch.

// pages/about.tsx
const About = () => {
  return (
    <div>
      <h1>About Us</h1>
      <p>We are a Next.js powered application.</p>
    </div>
  );
};

export default About;

Visit /about at example.com/about.

Pre-rendering in Next.js

Next.js pre-renders every page by default, which means the HTML is generated in advance. There are two forms of pre-rendering¹:

1. Static Generation (SSG)

• Pages are generated at build time and served as static files. This is ideal for pages that don't change often, like a blog or marketing site⁸.
• Example: Use getStaticProps() to fetch data at build time.

// pages/index.tsx
export async function getStaticProps() {
  const data = await fetchSomeData();
  return { props: { data } };
}

const HomePage = ({ data }) => {
  return <div>{data}</div>;
};

export default HomePage;

2. Server-Side Rendering (SSR)

• Pages are generated at request time, meaning the server will generate fresh HTML every time a request is made⁴.
• Example: Use getServerSideProps() to fetch data on each request.

// pages/profile.tsx
export async function getServerSideProps() {
  const userData = await fetchUserData();
  return { props: { userData } };
}

const ProfilePage = ({ userData }) => {
  return <div>{userData.name}</div>;
};

export default ProfilePage;

3. Incremental Static Regeneration (ISR)

• Pages can be updated after the site is built without rebuilding the entire site⁹.
• Example: Use revalidate to regenerate the page in the background.

// pages/blog/[id].tsx
export async function getStaticProps({ params }) {
  const blogPost = await fetchBlogPost(params.id);
  return {
    props: { blogPost },
    revalidate: 10, // Revalidate this page every 10 seconds
  };
}

API Routes in Next.js

You can create API endpoints using file-based routing. These are placed in the pages/api/ folder and can handle requests, such as fetching data or sending responses¹⁰.

// pages/api/hello.ts
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, Next.js!' });
}

Visit /api/hello to see the API response.

Conclusion

Next.js allows you to:

• Pre-render content for better SEO and performance⁶.
• Serve pages dynamically with server-side rendering or build static pages with static generation⁸.
• Use file-based routing for easier project organization⁷.
• Seamlessly handle client-side and server-side logic¹.

For more advanced topics:

• Explore API routes¹⁰, CSS modules¹¹, Image Optimization¹², and Dynamic Routing¹³.

---

References

Footnotes

1. Next.js Documentation – Basic Features ↩ ↩² ↩³ ↩⁴

2. Google Developers – JavaScript SEO ↩

3. Web.dev – Time to First Contentful Paint ↩ ↩²

4. Next.js Documentation – Server-side Rendering (SSR) ↩ ↩²

5. React – Hydration ↩

6. Google – SEO Fundamentals ↩ ↩²

7. Next.js Documentation – File-based Routing ↩ ↩² ↩³

8. Next.js Documentation – Static Generation (SSG) ↩ ↩²

9. Next.js Documentation – Incremental Static Regeneration (ISR) ↩

10. Next.js Documentation – API Routes ↩ ↩²

11. Next.js Documentation – CSS Modules ↩

12. Next.js Documentation – Image Optimization ↩

13. Next.js Documentation – Dynamic Routing ↩