next js page with code examples 2

Next.js is a popular React framework that provides efficient server-rendering capabilities. It offers an effective way to build static and dynamic websites with ease, especially when targeting search engine optimization. In this article, we explore more advanced Next.js topics and provide some code examples to help you get started.

Routing in Next.js

Next.js allows you to configure routing for your web application. Routing can be simple or complex, depending on your requirements.

Here's an example of how simple routing works in Next.js:

// pages/index.js
function HomePage() {
  return <h1>This is the homepage.</h1>
}

// pages/about.js
function AboutPage() {
  return <h1>This is the about page.</h1>
}

// pages/contact.js
function ContactPage() {
  return <h1>This is the contact page.</h1>
}

The above routes will be accessible from the browser with the following URLs:

Homepage -> http://localhost:3000/
About Page -> http://localhost:3000/about
Contact Page -> http://localhost:3000/contact

Next.js is very flexible and allows you to use dynamic routing as well. Here is an example of how to use dynamic routing:

// pages/post/[slug].js
import { useRouter } from 'next/router';

function PostPage() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>This is the {slug} post page.</h1>
    </div>
  );
}

With dynamic routing, the slug parameter is passed as a query string in the URL. For instance, if you have a blog, each blog post might have a unique slug value in its URL.

Next.js also supports file-based routing, which is synonymous with static routing. With file-based routing, each file in the pages directory is a route. For example, if you have a file named contact.js, you can access the contact page with the URL http://localhost:3000/contact.

Fetching Data in Next.js

Fetching data in Next.js is essential, especially if your website relies on external APIs. However, fetching data in the client's browser can negatively impact performance and user experience.

To solve this issue, Next.js provides various ways to fetch data on the server. One of the most popular methods is getStaticProps.

The getStaticProps function is called during build time and passes the fetched data as a prop to the component. Here is an example of how it works:

// pages/posts/[slug].js
function PostPage(props) {
  const { post } = props;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

export async function getStaticPaths() {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts`);
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { slug: `${post.id}` },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps(context) {
  const { params } = context;
  const { slug } = params;

  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${slug}`);
  const post = await res.json();

  return {
    props: { post },
  };
}

Here's how it works:

getStaticPaths is used to specify the URL parameters that should be generated statically.
getStaticProps is used to fetch data based on the URL parameter passed in the context object.
The post data returned from getStaticProps is passed as a prop to the component.

Data fetching can also occur on the server following a request from the client. This method is called getServerSideProps. Here is an example of how it works:

// pages/posts/[slug].js
function PostPage(props) {
  const { post } = props;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

export async function getServerSideProps(context) {
  const { params } = context;
  const { slug } = params;

  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${slug}`);
  const post = await res.json();

  return {
    props: { post },
  };
}

getServerSideProps retrieves the data required for the page at the request time on the server, not at build time as in getStaticProps.

CSS-in-JS with Next.js

Next.js supports CSS-in-JS, which allows you to write CSS directly in your JavaScript components. There are several CSS-in-JS libraries, including Styled Components, Emotion, and Material-UI.

Here is an example using Styled Components:

// pages/index.js
import styled from 'styled-components';

const Title = styled.h1`
  font-size: 3rem;
  text-align: center;
`;

function HomePage() {
  return (
    <div>
      <Title>Welcome to my website</Title>
      <p>This is an example of CSS-in-JS with Styled Components.</p>
    </div>
  );
}

export default HomePage;

Here, Title is a styled component that defines the font-size and text-align values, which can be used in any subsequent component.

Conclusion

In this article, we covered some advanced topics in Next.js. We looked at how routing works and how to use dynamic routing. We also covered data fetching using getStaticProps and getServerSideProps. Finally, we discussed using CSS-in-JS with Next.js and provided an example using Styled Components.

As you can see, Next.js is a powerful framework that provides a lot of features to help you build your web application. With the examples in this article, you should be well-equipped to get started building your own Next.js application.

In addition to what was covered in the previous section, let's dive deeper into the topics of routing, data fetching, and CSS-in-JS using Next.js.

Routing in Next.js

Next.js is known for its automatic code splitting and server rendering capabilities, which allows you to create performant pages with a smooth user experience. Routing is an essential part of this process because it allows your application to navigate between pages while keeping the URL synchronized with the active page.

Next.js offers several types of routing: static, dynamic, and catch-all. Static routing maps a specific URL path to a React component file, as shown in the earlier example. Dynamic routing enables you to create dynamic pages based on URL parameters passed to the component, as also seen in the previous example.

Catch-all routing, on the other hand, allows you to create routes that match all possible URL paths, which is useful when you can't predict the URL pattern at build time. Here is an example of how to use catch-all routing:

// pages/[...slug].js
import { useRouter } from 'next/router';

function DynamicPage() {
  const router = useRouter();
  const { slug } = router.query;

  return <h1>This is the dynamic page for {slug.join('/')}</h1>;
}

export default DynamicPage;

Here, the [...slug] route matches any possible URL paths. It accepts one or many segments, separated by slashes, and maps them to the slug parameter, which is an array of string values.

Data Fetching in Next.js

Next.js provides two functions for fetching data: getStaticProps and getServerSideProps.

getStaticProps is used for pre-rendering static content. It allows you to fetch data at build time and then pass that data to the component as props. This function can be used to improve website performance by creating static pages that are ready to be served to the client.

getServerSideProps is used for fetching data at request time, giving you the flexibility to fetch data for each request dynamically. This function is useful when you need to access user-specific data or when you're dealing with data that changes frequently and cannot be pre-rendered at build time.

It's worth noting that both functions can also be used to define the paths that should be created at build time for pre-rendered pages using getStaticPaths, which works well when you have a large number of static pages that need to be pre-generated.

CSS-in-JS with Next.js

CSS-in-JS is a technique that allows you to write CSS styles in JavaScript components using a library like Styled Components or Emotion. This method provides several benefits, including cleaner code, better performance, and a more intuitive programming experience.

Next.js supports CSS-in-JS out of the box, making it easy to get started. One of the most popular libraries is Styled Components, which offers a powerful API and a straightforward syntax for creating and styling components.

Here is an example of how to use Styled Components in Next.js:

import styled from 'styled-components';

const Container = styled.div`
  background-color: #ffffff;
  border: 1px solid #eaeaea;
  padding: 0.5rem;
`;

const Title = styled.h1`
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
`;

const Paragraph = styled.p`
  font-size: 1rem;
`;

function HomePage() {
  return (
    <>
      <Container>
        <Title>Hello, World!</Title>
        <Paragraph>This is a simple example of using styled-components in Next.js</Paragraph>
      </Container>
    </>
  );
}

export default HomePage;

Here, styled is a function that returns a new component based on the given CSS styles. The Container, Title, and Paragraph components are created using this function, and they work like regular React components.

Conclusion

Next.js is an excellent framework for building complex, high-performance web applications. Routing, data fetching, and CSS-in-JS are all essential features that make it possible to create dynamic, responsive pages and deliver a great user experience.

In this article, we've covered some advanced topics in Next.js, including dynamic routing, catch-all routing, data fetching using getStaticProps and getServerSideProps, and using Styled Components for CSS-in-JS. We hope this article has helped you better understand Next.js and its powerful capabilities.

next js page with code examples 2

Popular questions

Tag

Ahmed Galal

Leave a Reply Cancel reply

Popular questions

Tag

Ahmed Galal

Leave a Reply Cancel reply

Related Posts