NextJS 14 isn’t just an update, it’s a refocus on developer experience and speed. Overall, NextJS 14 promises a faster, more enjoyable development journey for React developers. Whether you’re starting fresh or upgrading an existing project, it’s definitely worth checking out.

Today I am going to tell you about some concepts of NextJS that most of the developers don’t know, you can use them to optimize your App and improve the Developer Experience.

So let’s begin 😉

Do you have a messy folder structure? Hard to find the particular route? So organize them by using Route Group functionality provided by Next JS.
Let’s organize this folder structure using Route Groups.

Now you can easily find routes about different topics by keeping them under the Route Group Folder.
Route groups don’t add their folder name in the URL
URL: http:localhost:3000/sign-in

2. Static Metadata

Next.js has a Metadata API that can be used to define your application metadata (e.g. meta and link tags inside your HTML head element) for improved SEO and web shareability.

You can use the metadata API in both page.tsx or layout.tsx

3. Dynamic Metadata

You can use generateMetadata function to fetch metadata that requires dynamic values.
It is used to increase and enhance the SEO score of your website.

As you can see above, dynamically the title of the website is getting changed.

Ordering of Metadata
Metadata is evaluated in order, starting from the root segment down to the segment closest to the final page.tsx segment. For example:

app/layout.tsx (Root Layout)
app/favourite/layout.tsx (Nested Blog Layout)
app/favourite/[slug]/page.tsx (Blog Page)
4. Private Routes
You might be thinking what are private routes? Are they something which only an admin can access? No, private routes means the folders which can’t be accessed by any user directly through the website. Simply the web pages that aren’t served directly to the client.
This can be achieved by the following methods:
1.Making a separate components directory outside the app directory.
2.Inside any directory, which is under the app directory, creating a _components folder. (Any name can be given, and yeah that’s an underscore, you saw that right).
3. Creating different files inside a directory which won’t get served directly to the client until and unless added to the page.tsx file.
5. Catch-all Segments
Dynamic Segments can be extended to catch-all subsequent segments by adding an ellipsis inside the brackets [...segmentName]
For example, /docs/[...slug]/page.tsx will match /docs/topic , but also /docs/topic/1 and so on. But if will give us a page not found error if the URL is /docs .
Here is the code snippet: app/docs/[...slug]/page.tsx
6. Optional Catch-All Segments
Catch-all Segments can be made optional by including the parameter in double square brackets: [[...segmentName]].
For example, /docs/[[...slug]]/page.tsxwill also match /docs, in addition to /docs/topic, /docs/topic/10.
The difference between catch-all and optional catch-all segments is that with optional, the route without the parameter is also matched (/docs in the example above).
7. Active Links
Ever thought how there is an overlay on the links of a site the one which you are viewing on your screen?
Today I am going to tell you how to achieve that functionality and enhance the User Experience.
So let us first create a Navbar.tsx in the components directory.
As this will be a client component because the user will interact with the Navbar, add the "use client" directive at the top your file. Also import a hook name usePathname from next/navigation .
So let me break the code for you, first, by creating a links constant we are defining the links we want in our Navbar. Click on any one of the links to see the magic! As you can see, as I clicked on the “Sign In” link the color of the text got changed! That was so easy :)
Note: Make sure the route URL gonna use already exists or it will give a 404 error.

Things You Don’t Know About Next.js