Everything you need to know about Next.JS to start a new application today

1. Introduction

2. The Project

3. Starting setup

4. Rounting

5. Project Routes

6. Navigating between pages

7. Conclusion

Everything you need to know about Next.JS to start a new application today.

1 Introduction

Today, we’ll dive into building an application with Next.js!

Next.js is a powerful React framework that goes beyond just front-end development. While React typically focuses on building user interfaces, Next.js enables full-stack applications by handling both the front end and back end in one unified framework. This approach is often referred to as a "Backend for Frontend" (BFF), allowing us to create complete, robust applications with ease.

Importants Links

Creating project

CODE Kopieren

npx create-next-app@latest

Next this, will be show some questions for you:

CODE Kopieren

This will be the name and folder name of your project.

What is your project named? eve



// **YES** - Use typescript is better, for this project, we will be use.

Would you like to use TypeScript? No / Yes



// **YES** - Eslint can help you to avoid errors

Would you like to use ESLint? No / Yes



// **NO** - For this project, we will use styled-components

Would you like to use Tailwind CSS? No / Yes



// **YES**

Would you like your code inside a `src/` directory? No / Yes



// **YES**

Would you like to use App Router? (recommended) No / Yes



// **NO**

Would you like to use Turbopack for `next dev`?  No / Yes



// **NO**

Would you like to customize the import alias (`@/*` by default)? No / Yes

What import alias would you like configured? @/*

1. Now you can run the command below to see the default Next.js page.
   

CODE Kopieren

  npm run dev

You can also use this approach, but it will build your application as static pages.

CODE Kopieren

  npm run start

4 Rounting

Next.js provides an easy way to handle routing in your application based on path names. Let’s take a closer look at each case.

1. Commom routing

• In the /src/app directory, look for the page.tsx file. Every page file in Next.js is named this way, and you must always export it as the default. This is the default page displayed when you access ´" you need see only this:

  
  
  

  
  
  
  

  Sometimes we need to separate our code in more paths, but dont wanna change de url.

  
  
  

  Change the 'auth' path to '(auth)' and create a path inside calls 'login' and move the last file to them.

  
  
  

  Check two things:

  
  
  
  
  
  • the '/auth' url not working now, if you try access a 404 error will show you.
  
  
  • if you access '/login' you will see our component.
  
  
  
  
  

  So this help us to create modules in the project without interfering with the user experience.

  
  
  

  
  
  
  4 -

  
  
  

  
  
  
  7 Project Routes
  

  
  
  

  We already know the basics features to start our development, so let's get started intalling the dependencies.
  
  

  
  
  
  
  

  CODE Kopieren

  npm i styled-components react-query 
  
  
  
  

  
  
  
  
  
  
  
  

  
  
  
  Creating authentication pages
  

  
  
  

  Auth routes

  
  
  

  Inside '(auth)' path create a "register", your path must looks likes this:

  
  
  
  
  

  In this step you can create genericals pages, this articles is focus on nextjs features.

  
  

  
  
  
  7 Project Routes -

  
  

To navigate between pages we must to use two ways.

When is a link options, the next component is the better instead the default html tag, because don't re rendering a page and causing a new pre render on server, and the Next Link component doesn't.

For example, create a button at login page for navigate to inside the platform.

Navigating like that, do you have a SPA (A SINGLE PAGE APPLICATION), that's made a better user experience.

Another way to do the same thing is using a router hook from next.

Conclusion

In this article, we explored key Next.js features, including the fundamentals of routing, creating dynamic and nested pages, organizing code with route groups, and implementing authentication and access control using middleware. Additionally, we learned how to optimize navigation for a better user experience by leveraging the Link component and programmatic routing with the useRouter hook. These concepts lay a strong foundation for building scalable and user-friendly applications with Next.js