React Series #10: Understand the folder structure in react next.js project

It is essential to understand the folder structure to master the linking. So you can easily create navigations. Using this you can create static links and dynamic route

How to create a static page

Create a folder inside the app folder, in this example “about-us” is our folder and inside it you can create a file called page.js

when you access this page in localhost:3000/about-us

Similarly, you can create a folder called contact-us and create a file called page.js and use it for contact-us

How to organize these static pages inside a folder internally:

Yes it is pretty easy, you can use brackets to do it (pages) > about-us

But this won’t be visible in the URL. You can use this more to internally organize the pages.

How to create dynamic pages in next.js

To create dynamic pages, you need to use [ ] square brackets. LIke this:

Now you can access the page through URL like this:

localhost/3000/blog/how-to-create-a-puzzle

Here is the sample code inside the dynamic page.js

"use client"
import React from 'react'
import { usePathname } from "next/navigation";

function blog() {
    const params = usePathname();
    const blogslug = params.split("/")[2];
    //console.log(blogslug);

  return (
    <div>blog
        <h2>{blogslug}</h2>
    </div>
  )
}

export default blog

Hope you all understood the structure of the folders and how you can do the dynamic routes.