A Guide to Setting Up Zsh: Improving Your Terminal Experience

James Jeremy Foong — Mon, 28 Oct 2024 10:36:29 +0000

Hello. This is a guide I've put together mainly as a reference for myself when setting up a new Ubuntu device. I often forget the exact steps, so having this written down helps me replicate my preferred terminal setup. I'm sharing it in case others find it useful too. This guide covers setting up Zsh with some add-ons that I find helpful.

What We're Setting Up

Zsh: An improved version of the standard command-line interface.
Oh My Zsh: A collection of helpful features for Zsh.
Powerlevel10k: A theme that makes your command line look... nice.
Autosuggestions: A feature that suggests commands as you type.

Step 1: Install Zsh

First, we need to install Zsh. The process is usually straightforward, but it might vary depending on your operating system.

For Mac users:

If you're using a recent version of macOS, Zsh is already installed. You can move on to Step 2.

For Ubuntu or other Debian-based Linux:

Open your terminal and type these commands:

sudo apt update
sudo apt install zsh

You'll need to enter your password and confirm the installation.

For other operating systems:

You might need to look up specific instructions for your system. Try searching for "How to install Zsh on [Your Operating System]".

Step 2: Install Oh My Zsh

Now that we have Zsh, let's add Oh My Zsh. Copy and paste this command into your terminal:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

This command downloads and runs the Oh My Zsh installer. Just follow any prompts that appear.

Step 3: Install the Powerlevel10k Theme

Powerlevel10k will change how your terminal looks. Here's how to set it up:

Use this command to download Powerlevel10k:

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

We need to edit a file called .zshrc. Open it with this command:

nano ~/.zshrc

Find the line that starts with ZSH_THEME. Change it to:

ZSH_THEME="powerlevel10k/powerlevel10k"

To save and exit, press Ctrl+X, then Y, then Enter.

Step 4: Add Autosuggestions

Autosuggestions can help you type commands faster. Here's how to add this feature:

Run this command to download the autosuggestions plugin:

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

We need to edit the .zshrc file again:

nano ~/.zshrc

Find the line that starts with plugins=. Add zsh-autosuggestions to the list. It should look something like this:

plugins=(git zsh-autosuggestions)

Save and exit (Ctrl+X, Y, Enter).

Step 5: Set Up Powerlevel10k

Now we'll customize how your terminal looks.

Close your terminal completely and open a new one.
You should see a setup wizard for Powerlevel10k. If you don't, type p10k configure and press Enter.
Follow the prompts to choose how you want your terminal to look. You can always change this later by running p10k configure again.

Step 6: Using Your New Setup

That's it. You've set up a more advanced terminal. Here are some things to note:

To use autosuggestions, start typing a command you've used before. You should see a faded suggestion appear. Press the right arrow key to accept it.
You can explore more Oh My Zsh plugins on the official wiki.
If something doesn't seem right, try closing your terminal and opening a new one.

It's okay if you don't understand everything right away. You'll get more comfortable with it as you use it.

Example .zshrc File

After setting everything up, your .zshrc file will contain all the configurations we've discussed. I've put my personal .zshrc file on GitHub if you want to look at it:

[Link to your GitHub repository with the .zshrc file]

Here's a brief explanation of what you might see in this file:

Oh My Zsh Path:

   export ZSH="$HOME/.oh-my-zsh"

Theme Setting:

   ZSH_THEME="powerlevel10k/powerlevel10k"

Plugins:

   plugins=(git zsh-autosuggestions)

Oh My Zsh Source:

   source $ZSH/oh-my-zsh.sh

Powerlevel10k Customizations: Lines starting with POWERLEVEL9K_ or POWERLEVEL10K_.
Custom Aliases: Lines starting with alias.

You can look at my .zshrc file here for ideas, but remember that your file should be set up for your own needs and preferences.

If you make changes to your .zshrc file, you'll need to either restart your terminal or run source ~/.zshrc for the changes to take effect.

Conclusion

Now we've set up a more advanced terminal environment. With Zsh, Oh My Zsh, Powerlevel10k, and autosuggestions. Feel free to experiment with your configuration as you become more comfortable with it. I hope you find this setup helpful for your work.

Creating a Custom 404 Not Found Page in Next.js 14

James Jeremy Foong — Tue, 10 Sep 2024 15:43:51 +0000

Next.js 14 provides an easy way to create custom 404 Not Found pages for your web application. In this blog post, we'll create and customize a 404 page to enhance your user experience.

Why Create a Custom 404 Page?

A custom 404 page allows you to:

Maintain your site's branding and design
Provide helpful information to users who've reached a non-existent page
Offer navigation options to guide users back to valid content

Steps to Create a Custom 404 Page

1. Create the 404 File

In Next.js 14, creating a custom 404 page is as simple as adding a not-found.js or not-found.tsx file to your app directory.

app/
├── not-found.js (or not-found.tsx)
└── layout.js

2. Design Your 404 Page

Let's create a basic 404 page. Here's an example of what your not-found.js might look like:

import Link from 'next/link'

export default function NotFound() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <h1 className="text-6xl font-bold text-gray-800 mb-4">404</h1>
      <h2 className="text-2xl font-semibold text-gray-600 mb-4">Page Not Found</h2>
      <p className="text-gray-500 mb-8">Oops! The page you're looking for doesn't exist.</p>
      <Link href="/" className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
        Go back home
      </Link>
    </div>
  )
}

This example uses Tailwind CSS for styling. If you're not using Tailwind, you can replace the className attributes with your own CSS.

3. Customize Your 404 Page

Feel free to customize the content and styling of your 404 page. You might want to add:

Your company logo
A search bar to help users find what they're looking for
Links to popular pages on your site
A contact form or link to report broken links
Games to interact with users

4. Testing Your 404 Page

To test your custom 404 page:

Run your Next.js development server
Navigate to a non-existent route (e.g., http://localhost:3000/this-page-does-not-exist)
You should see your custom 404 page instead of the default Next.js 404 page.

Conclusion

And there you have it! With just a few lines of code, you've transformed the dreaded 404 error into an opportunity to delight your users.

Happy coding, and may your users never be truly lost again! 🚀✨

P.S. If you come up with any cool 404 page ideas, drop them in the comments. I'm always looking for inspiration!

DEV Community: James Jeremy Foong

A Guide to Setting Up Zsh: Improving Your Terminal Experience

What We're Setting Up

Step 1: Install Zsh

For Mac users:

For Ubuntu or other Debian-based Linux:

For other operating systems:

Step 2: Install Oh My Zsh

Step 3: Install the Powerlevel10k Theme

Step 4: Add Autosuggestions

Step 5: Set Up Powerlevel10k

Step 6: Using Your New Setup

Example .zshrc File

Conclusion

Creating a Custom 404 Not Found Page in Next.js 14

Why Create a Custom 404 Page?

Steps to Create a Custom 404 Page

1. Create the 404 File

2. Design Your 404 Page

3. Customize Your 404 Page

4. Testing Your 404 Page

Conclusion