Mastering NextJS 13: A Beginner's Guide | (Part 1)

Welcome to the first installment of our series on the NextJS 13 (app router), where we'll mastering NextJS a straightforward journey for everyone.

In this blog, we'll discuss why NextJS is best for web development. We'll look at its key features, explain why you should use it, and how the file structure works in NextJS 13 (App router).

As their Docs said -
"Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations."

So, Next.js, built on top of React, comes with additional features, transforming it into a full-stack framework. This means you can develop both the front end and back end and seamlessly integrate databases.

Key Features of Nextjs App Router?

NextJS provides Lots of Features so we should need to use it

1. File Based Routing:-

   In React, we typically rely on third-party libraries like React Router DOM for routing. However, in NextJS, we can achieve routing more easily through our Folder/File Structure.

2. Styling:-

   We can easily add styling, and it provides straightforward access to Tailwind, whereas in a React project, setting up Tailwind styling requires manual configuration.

3. Rendering:-

   In Next.js, we can configure components to be either client-side or server-side based on our requirements. By default, in Next.js, all components are treated as server-side components

4. Optimizations:-

   Next.js comes with a variety of Built-in -Components like Images , Link , Scripts designed to improve the application's speed.

5. Typescript Support

NextJS App Router File Structure

In NextJS App Router, to get specific output we need to follow a Perfect Structure

Here in this Image, I explained some Top Level Files Working Procedures.

Now Let's Deep Dive into How to make routes

In this example, I'm using TypeScript, but you can use any file extension you prefer, such as .js, .ts, .jsx, or .tsx.

Basically, in localhost, you will get a URL like this localhost:3000

In the image, we can see that to create a specific route in Next.js, all you need to do is create a folder and add a file named page.tsx inside it. This simple convention helps Next.js identify it as a route and it is mandatory.

Next.js follows some helpful app routing conventions, including:

loading: Used for showing loading UI.

error: Used for displaying error UI.

layout : A layout in Next.js is a wrapper component that can be used to share a common layout between Components.

You can find more details on these conventions in the documentation.

Nested Routes: Using folders within folders.

Dynamic Routes: These adaptable routes change based on data or content, making your web applications more flexible and data-driven.

For instance, you can have a route like app/blog/[slug]/page.jsx.

I've illustrated some more File Structure concepts in the diagram below.

That's it for our introduction to file-based routing in Next.js. Stay tuned for more exciting Next.js concepts in our upcoming blog posts.

Happy Coding🎉