Personalizing Your Next.js Blog

On this page

In this second part of our tutorial series, we'll be personalizing the minimalist blog we created using Next.js 14 and Wisp CMS.

If you prefer to read, you can find accompanying notes to the video tutorial below.

Prerequisites

Step 1: Understanding the Folder Structure

  1. Open your project in your preferred code editor
  2. Navigate to the root folder
  3. Explore the following key directories:
    • src: Contains all the source code
    • src/app: Contains the routing structure and page components
    • src/components: Houses reusable React components
    • src/lib: Contains utility functions and configurations

Step 2: Customizing the About Page

  1. Navigate to src/app/about/page.tsx
  2. Edit the content using Markdown syntax
  3. To change the profile picture:
    • Add your image to the public/images folder
    • Update the image path in the Markdown content

Step 3: Updating Site Configuration

  1. Open src/config.ts
  2. Modify the following fields:
    • siteConfig.title
    • siteConfig.description
    • siteConfig.copyright
  3. Alternatively, update these values in your .env file:
    • NEXT_PUBLIC_SITE_TITLE
    • NEXT_PUBLIC_SITE_DESCRIPTION
    • NEXT_PUBLIC_COPYRIGHT

Step 4: Adding a New Page

  1. Create a new folder in src/app (e.g., favorite-products)
  2. Add a page.tsx file in this new folder
  3. Copy the basic structure from another page and modify as needed
  4. Update the metadata for SEO purposes

Step 5: Updating the Navigation

  1. Locate the header component (usually in src/components/Header.tsx or similar)
  2. Add a new navigation item for your new page:

Step 6: Exploring React Components

  1. Navigate to the src/components folder
  2. Examine existing components to understand their structure
  3. Modify components as needed to fit your design preferences

Step 7: Understanding Next.js App Router

  1. Review the src/app folder structure
  2. Note how each folder represents a route in your application
  3. Understand that page.tsx files define the content for each route

Step 8: Basic SEO Optimization

  1. In each page.tsx file, locate the metadata object
  2. Update the title and description fields for better SEO:

Step 9: Customizing the Main Page

If you want to change the main page from the blog list:

  1. Move the current src/app/page.tsx to another folder (e.g., src/app/blog/page.tsx)
  2. Create a new src/app/page.tsx with your desired content for the homepage

Step 10: Learn More

Getting the base blog template up is only the starting point - you can build amazing things with this as a starting point.

Here's what you can build on top of this base template:

  • style the site to your preference
  • add custom interactive components
  • add call-to-actions and forms
  • turn it into a SaaS

To be able to do that you will probably have to learn more about:

Conclusion

You've now learned how to:

  • Customize your blog's content and appearance
  • Add new pages to your Next.js application
  • Work with React components
  • Implement basic SEO practices

Coming Up Next

In the next part of this series, we'll cover:

  • Deploying your blog to a live server
  • Setting up custom domains

Stay tuned for the final part of our tutorial series!