Things You Don’t Know About Next.js v14

Introducing Next.js 14 — more than just an update, it’s a deliberate shift towards enhancing developer experience and accelerating speed.

With Next.js 14, React developers can expect a streamlined and more enjoyable development journey. Whether you’re embarking on a new project or upgrading an existing one, exploring the features of Next.js 14 is highly recommended.

Today, I’ll share some lesser-known concepts of Next.js that can significantly optimize your app and elevate the developer experience. These insights can empower you to unlock new levels of efficiency and performance within your projects.

So let’s begin 😉

1. Route Groups

Messy Folder Structure

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.

Organized Folder Structure

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

No (auth) in the URL.

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

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'Hero's Blog',
  description: 'Blog created by Hero',
}

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.

import type { Metadata } from "next";

type Props = {
    params: {
        id: string
    }
};
export const generateMetadata = ({ params }: Props): Metadata => {
    return {
        title: `Product ${params.id}`
    }
}
export default function FavouriteProductDetails({ params }: Props) {
    return <h1>Favouraite Product Details {params.id}</h1>
}

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:

1. app/layout.tsx (Root Layout)
2. app/favourite/layout.tsx (Nested Blog Layout)
3. 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 .

404 error

Here is the code snippet: app/docs/[...slug]/page.tsx

import React from 'react'

type Params = {
    params: {
        slug: string[]
    }
}
export default function SlugPage({ params: { slug } }: Params) {
    return (
        <div>
            <h1>Viewing Custom Slug Page</h1>
            <span>URL Contains: {slug.toString()} </span>
        </div>
    )
}

You guys might be wondering can we fix that 404 error? 🤔
What if I say yes!! Yes you can fix that error.
Scroll down to see the solution !!

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.

No more error!

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 .

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

type Links = {
    title: string,
    url: string
}
export default function Navbar() {
    const links: Links[] = [
        {
            title: "Sign In",
            url: "/sign-in"
        },
        {
            title: "Favourite",
            url: "/favourite/1"
        },
    ];
    const pathname = usePathname()
    return (
        <div className='flex space-x-4'>
            {
                links.map(({ title, url }: Links) => {
                    const isActive = pathname.startsWith(url)
                    return <Link
                        className={isActive ? "font-bold text-emerald-500" : "text-white"}
                        key={title}
                        href={url}>
                        {title}
                    </Link>
                })
            }
        </div>
    )
}

So let me break the code for you, first, by creating a links constant we are defining the links we want in our Navbar. Map them and your page should somewhat look like this:

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.

In conclusion, we’ve explored several advanced concepts and techniques in Next.js that can greatly enhance the development experience and optimize the performance of our applications.

From organising route groups to leveraging static and dynamic metadata for improved SEO, and implementing private routes to enhance security, we’ve covered a wide range of topics.

Additionally, we’ve learned about catch-all segments and optional catch-all segments for dynamic routing flexibility, as well as how to implement active links in our navigation for a better user experience.

By incorporating these techniques into our Next.js projects, we can streamline our development process, improve SEO scores, and provide a more seamless experience for our users.

As we continue to explore and implement these concepts, we’ll be better equipped to build robust and efficient web applications that meet the needs of our users and stakeholders.

Thank you for joining me on this journey, and stay tuned for more insightful content on Next.js and JavaScript development.

Don’t forget to follow me on Medium and subscribe to the newsletter for updates. Until next time, happy coding!