Getting Started with Next.js for My Website

Next.js is a powerful React framework that makes building web applications easier and more efficient. For my personal website, I chose Next.js because of its performance, built-in features, and ease of deployment.

Why I Chose Next.js

Next.js offers several key benefits that made it ideal for my project:

• Fast page loads due to automatic code splitting
• SEO-friendly with server-side rendering (SSR) and static site generation (SSG)
• Built-in API routes for dynamic backend features
• Easy integration with Vercel for hosting
• Support for modern JavaScript and TypeScript

Setting Up My Next.js Project

To start my website, I used the following command:

npx create-next-app@latest [website directory name]

After the setup, I navigated to my project directory and launched the development server:

cd [website directory name]
npm run dev

Project Structure

Next.js uses a file-based routing system. This means that the structure of your project's files determines the routes of your application. For example, a file at pages/about.js will be accessible at /about. Here’s how I structured my website:

• /app/page.jsx - Home page
• /app/about/page.jsx - AboutMe page
• /lib/journey-data.js - Dynamic Journey Post pages
• /public - Static assets like images, media, and other document files
• etc

Deploying to Vercel

Once my site was functional, I deployed it using Vercel with the following steps:

npm i -g vercel
vercel

Vercel automatically optimized my Next.js project for production, providing a seamless deployment process.

Conclusion

Next.js has been an excellent choice for building my personal website. With features like fast performance, simple routing, and easy deployment, I was able to create and launch my site efficiently.

In upcoming posts, I plan to talk more about my journey, refining my website, and life updates.