Back to Next JS Course

Understanding pages and routing is crucial in Next JS as it forms the backbone of how your application is structured and navigated.

What is File-based Routing?

In Next JS, the file system is the main API. Each file in the pages directory automatically becomes a route in your application.

For example,

• pages/index.tsx corresponds to the / route.
• pages/about-me.tsx corresponds to the /about-me route.

Creating Pages

Creating a Simple Page

Lets create a new file called about-me.tsx in pages directory.

import React, { useEffect } from 'react';

const AboutMe: React.FC = () => {
  useEffect(() => {
    document.title = `POAbout Me`;
  }, []);

  return (
    <h1>This is Praveen Oruganti.</h1>; 

  );
};
export default AboutMe;

Automatic Routing

Next.js automatically handles routing based on the file structure.

Dynamic Routing

Dynamic Routes

Create pages that can accept dynamic segments in the URL.

Use square brackets to denote dynamic segments.

For example, pages/course/[name].tsx

import { useRouter } from 'next/router';

const CourseComponent: React.FC = () => {
  const router = useRouter();
  const { name } = router.query;

  return <h1>Course Name: {name}</h1>;
}

export default CourseComponent;

Fetching Data for Dynamic Routes

• Use getStaticProps and getStaticPaths for static generation.
• Use getServerSideProps for server-side rendering.

Nested Routes

Creating Nested Routes

Organize pages into nested directories.

For example,

• pages/course/[name].tsx corresponds to /course/name.
• pages/course/[...slug].tsx corresponds to /course/name/topic/topicName.

Linking Between Pages

• Using the Link Component: Next.js provides a built-in Link component for client-side navigation.

For example,

import Link from 'next/link';

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/about-me">
        <a>Go to About Me Page</a>
      </Link>
    </div>
  );
}

export default Home;

• Programmatic Navigation: Use the useRouter hook for programmatic navigation.

For example,

import { useRouter } from 'next/router';

const Home = () => {
  const router = useRouter();

  const goToAbout = () => {
    router.push('/about-me');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={goToAbout}>Go to About Me Page</button>
    </div>
  );
}
export default Home;

Customizing the App and Document

• Custom App (_app.tsx): Customize the default App component to include global styles or context providers.

For example,

import '../styles/global.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import { AppProps } from 'next/app';
import { useEffect } from 'react';

function MyApp({ Component, pageProps }: AppProps) {

  useEffect(() => {
    document.addEventListener('keyup', function (event) {
      if (event.key === 'PrintScreen') {
        event.preventDefault(); // Prevent default behavior of PrintScreen
      }
    });

    document.addEventListener('contextmenu', function (event) {
      event.preventDefault();
    });
  }, []);

  return (
    <Component {...pageProps} />
  );
}

export default MyApp;