Technical Overview of Next.js.

Milka Mutinda — Tue, 17 Sep 2024 15:44:33 +0000

Lessons learned in nextjs:
**

Creating the new project.

Key in the following command in the terminal .

npm install -g pnpm

Then to create an app, enter the following command in the terminal.

npm install -g pnpm

Enter the following command still in the terminal to create the app in the desired folder.

npx create-next-app@latest nextjs-dashboard 
      example "https://github.com/vercel/next- 
      learn/tree/main/dashboard/starter-example" - 
      -use-pnpm

Running development server.

To install the project packages, run the below command:

pnpm i

Followed by the following command to start the development server:

pnpm dev

Adding styles.

To add global styles in your application, navigate to layout.tsx file under app folder and key import the global.css file

import '@/app/ui/global.css';

Creating a Home Page.

To create an attractive home page, elements like fonts and images are crucial. We will start by adding fonts in the project. By the use of next/font module, Next.js automatically optimizes in the application and downloads the font files at build time to host them with the other static assets.

 _import { Inter, Lusitana } from 'next/font/google';_

_export const inter = Inter({ subsets: ['latin'] });_

export const lusitana = Lusitana({
    weight: ['400', '700'],
    subsets: ['latin'],
});

To add the desktop image, we use the component. In the /app/page.tsx file, import the component from next/image and then add the image under the comment.

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { lusitana} from '@/app/ui/fonts';
_import Image from 'next/image';_
//..........    
        _<Image
        src="/hero-mobile.png"
        width={560}
        height={620}
        className="block md:hidden"
        alt="Screenshot of the dashboard project showing mobile version"
      />_

        </div>
      </div>
    </main>
  );
}

Nesting Routes.
Create folders that are used to nest routes. For example, create folders under the app folder, like a dashboard and invoices that map to a URL to showcase your app.

Navigating through Pages.
To navigate through a page, you need to use component to link between pages in the application. To use this component, go to /app/ui/dashboard/nav-links.tsx, and import the Link component from next/link. Replace with .

/...
import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import clsx from 'clsx';
/...

Setting Up Database.**

Here, you will start by pushing your repository to Github for ease in setting up the database and deploying. Set up a vercel account and import your already created folder containing your app then deploy.

Afterwards, connect store, create new, postgres then continue. Once you are done with that, go to .env.local tab, click show secret and copy snippet.

POSTGRES_URL="postgres://default:W95RsBPGcbeU@ep-cold-bar-a457mttq-pooler.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require"
POSTGRES_PRISMA_URL="postgres://default:W95RsBPGcbeU@ep-cold-bar-a457mttq-pooler.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require&pgbouncer=true&connect_timeout=15"
POSTGRES_URL_NO_SSL="postgres://default:W95RsBPGcbeU@ep-cold-bar-a457mttq-pooler.us-east-1.aws.neon.tech:5432/verceldb"
POSTGRES_URL_NON_POOLING="postgres://default:W95RsBPGcbeU@ep-cold-bar-a457mttq.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require"
POSTGRES_USER="default"
POSTGRES_HOST="ep-cold-bar-a457mttq-pooler.us-east-1.aws.neon.tech"
POSTGRES_PASSWORD="W95RsBPGcbeU"
POSTGRES_DATABASE="verceldb"

Seeding The Database.

The database is seeded inside of /app, in a folder called seed. Make sure to uncomment the file. The folder contains a Next.js Route Handler, called route.ts, that will be used to seed your database.
Ensure your local development server is running with pnpm run dev and navigate to your localhost. Afterwards, a confirmation message will appear to show a success.

Fetching Data For The Dashboard Overview Page.
There are several ways of fetching data from the database, like using server components where in next.js we use react server components.
There is also using SQL where you'll write dataabase queries using vercel postgres created previously and SQL.

import { Card } from '@/app/ui/dashboard/cards';
import RevenueChart from '@/app/ui/dashboard/revenue-chart';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
import { lusitana } from '@/app/ui/fonts';

export default async function Page() {
  return (
    <main>
      <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
        Dashboard
      </h1>
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {/* <Card title="Collected" value={totalPaidInvoices} type="collected" /> */}
        {/* <Card title="Pending" value={totalPendingInvoices} type="pending" /> */}
        {/* <Card title="Total Invoices" value={numberOfInvoices} type="invoices" /> */}
        {/* <Card
          title="Total Customers"
          value={numberOfCustomers}
          type="customers"
        /> */}
      </div>
      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        {/* <RevenueChart revenue={revenue}  /> */}
        {/* <LatestInvoices latestInvoices={latestInvoices} /> */}
      </div>
    </main>
  );
}

Handling Errors.
To handle errors in your code, you have to add JavaScript's try/catch statements inside your server actions /app/lib/actions.ts, to allow handling of errors.

Accessibility.
Accessibility is crucial for making web applications usable for everyone. Next.js, being a React-based framework, offers a range of techniques and tools to ensure that your application is accessible.

Adding Metadata.
Adding metadata to your Next.js application is essential for several reasons, primarily focused on improving SEO, accessibility, and sharing your web content on social media.

DEV Community: Milka Mutinda

Technical Overview of Next.js.