Building a portfolio website using Nextjs - Part 1 - ( Project Details)
What we will be building ? Intro for the project
A step-by-step guide on building a complete portfolio + blog + gallery website using Next JS (app router)
In this series, we gonna deep dive on building a complete end-to-end portfolio website using Nextjs 14 (app router)
The tech stack and libraries/packages that we will use to build this website will be :
Nextjs 14, React
Tailwind CSS
Daisy UI
ESLint
ContentLayer
Lucide Icons
The Portfolio Website Design
This portfolio will have 6 pages
Home
About
Blog
Gallery
Portfolio
Contact
We will be using this Figma mocks to build our portfolio website.
Setup Nextjs 14 (app router)
Setup Next.js 14 (app router)
To start, we will create our nextjs app using the following command:
$ npx create-next-app@latest
Setup Daisy UI
Daisy UI is a beautiful open-source UI Library built on top of Tailwind CSS. For this we are going to use this library.
$ npx i -D daisyui@latest
Add daisyUI to tailwind.config.js , update the plugins array :
import daisyui from "daisyui"
plugins: [
daisyui
]
Create a button in the homepage :
<button className="btn btn-primary">Button</button>
If the button shows up as blue button, great its working.
Setup ContentLayer
So we will use content layer for converting our static content in to json format. You can find more information about it here.
We gonna use this package as we are using Next 14, the old version is supported only till Next 13.
Run the following command to install content layer :
npm i contentlayer2 next-contentlayer2 data-fns
Once installed, we need to configure contentlayer with Next JS
To hook contentlayer in to the next dev
and next build
processes, you'll want to wrap the Next.js configuration using the withContentlayer
method.
update next.config.mjs file with this :
// @ts-check
/** @type {import('next').NextConfig} */
import { withContentlayer } from "next-contentlayer2";
const nextConfig = { reactStrictMode: true, swcMinify: true };
export default withContentlayer(nextConfig);
Typescript configuration
Then add the following lines to tsconfig.json
{
"compilerOptions": {
"baseUrl": ".", // add this
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"],
"contentlayer/*": ["./.contentlayer/generated"] // add this
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".contentlayer/generated"], // add this
"exclude": ["node_modules"]
}
This configures the Next.js build process and your editor to know where to look for generated files, and to make it easier to import them in to your code.
Add this in .gitignore
# contentlayer
.contentlayer
Add the following plugins (later not now):
remark-toc - used for generating table of contents
Update Contentlayer.config.ts
//contentlayer.config.ts
import { defineDocumentType, defineNestedType, makeSource } from 'contentlayer2/source-files'
const Author = defineNestedType(() => ({
name: 'Author',
fields: {
name: { type: 'string', required: true },
picture: { type: 'string', required: true },
},
}));
export const Post = defineDocumentType(() => ({
name: 'Post',
filePathPattern: `**/*.md`,
contentType: 'markdown',
fields: {
title: {
type: 'string',
description: 'The title of the post',
},
description: {
type: 'string',
},
publishedAt: {
type: 'date',
description: 'The date the post was published',
},
status: {
type: 'enum',
options: ['published', 'draft'],
default: 'draft',
required: false,
},
slug: {
type: 'string',
description: 'The slug of the post',
required: false,
},
author: {
type: 'nested',
of: Author,
required: false,
},
featured: {
type: 'enum',
options: ["yes", "no"],
default: 'no',
required: false,
},
tags: {
type: 'string',
required: false,
},
coverImage: {
type: 'string',
description: 'The cover image of the post',
required: false,
},
date: {
type: 'date',
description: 'The date the post was published',
},
},
computedFields: {
url: { type: 'string', resolve: (post) => `/blog/${post._raw.flattenedPath}` }
},
}))
export default makeSource({
contentDirPath: 'src/content/posts',
documentTypes: [Post],
})
This configuration specifies a single document type called Post. These documents are expected to be Markdown files that live within a src/content
directory in your project.
Any data objects generated from these files will contain the fields specified above, along with a body
field that contains the raw and HTML content of the file. The url
field is a specified computed field that gets automatically added to all post documents, based on meta properties from the source file.
Add the below in package.json (scripts)
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"build:content": "contentlayer2 build" // add this
},
Creating posts
Now create few posts:
create a hello-world.md
---
title: Hello World !
date: 2024-07-18
description: 'Welcome to our blog'
publishedAt: 2024-07-18
status: published
slug: '/hello-world'
tags: 'general'
---
### Hello World
Welcome to our blog ! Thanks for visiting. Stay tuned
And another post:
---
title: Hello World again !
date: 2024-07-18
description: 'You are still here, thanks !'
publishedAt: 2024-07-18
status: published
slug: '/hello-world-again'
tags: 'general'
---
Thanks man,
I really appreciate you watching the video :) I hope you follow it completely to build the portfolio website.
Now run the build content command:
npm run build:content
This will generate .contentlayer folder with all the generated json content for use.
Creating the Blog
To test it, we need to build a blog page to display all posts, and a post page to display single blog post.
Let's do that:
Let's create our Blog posts page :
Create a new page under app/blog/page.tsx
import React from "react";
import Link from "next/link";
import { compareDesc, format, parseISO } from "date-fns";
import { allPosts, Post } from "contentlayer/generated";
export const metadata = {
title: "Blog",
description: "Welcome to my blog",
languages: {
"en-US": "/en-US",
},
keywords: ["blog", "posts", "articles"],
category: "technology",
};
function PostCard(post: Post) {
return (
<div className="mb-8">
<h2 className="mb-1 text-xl">
<Link
href={post.url}
className="text-blue-700 hover:text-blue-900 dark:text-blue-400"
>
{post.title}
</Link>
</h2>
<time dateTime={post.date} className="mb-2 block text-xs text-gray-600">
{post && post.date ? format(parseISO(post.date), "LLLL d, yyyy") : ""}
</time>
<div
className="text-sm [&>*]:mb-3 [&>*:last-child]:mb-0"
dangerouslySetInnerHTML={{ __html: post.body.html }}
/>
</div>
);
}
const Blog = async () => {
const posts = allPosts.sort((a, b) =>
a.date && b.date ? compareDesc(new Date(a.date), new Date(b.date)) : 0
);
return (
<div className="mx-auto max-w-xl py-8">
<h1 className="mb-8 text-center text-2xl font-black">
Welcome to my Blog
</h1>
<h2 className="flex pb-6 text-2xl font-extrabold tracking-tight text-gray-400 dark:text-gray-300 sm:text-2xl md:text-2xl">
Recent Posts
</h2>
<hr className="border-gray-200 dark:border-gray-700" />
{!posts.length && "No posts found."}
{posts.map((post, idx) => (
<PostCard key={idx} {...post} />
))}
</div>
);
};
export default Blog;
Create a blog post page : blog/[slug]/page.tsx
import { format, parseISO } from "date-fns";
import { allPosts } from "contentlayer/generated";
import Link from "next/link";
import Image from "next/image";
import { redirect } from "next/navigation";
export const generateStaticParams = async () =>
allPosts.map((post) => ({ slug: post._raw.flattenedPath }));
// generate meta data
export const generateMetadata = ({ params }: { params: { slug: string } }) => {
const post = allPosts.find((post) => post._raw.flattenedPath === params.slug);
if (!post) throw new Error(`Post not found for slug: ${params.slug}`);
return {
title: post.title,
description: post.description,
keywords: post.tags,
};
};
const PostLayout = ({ params }: { params: { slug: string } }) => {
const post = allPosts.find((post) => post._raw.flattenedPath === params.slug);
if (!post) {
console.error(`Post not found for slug: ${params.slug}`);
redirect("/404");
}
return (
<div className="mx-auto max-w-xl py-20">
<article className="mx-auto max-w-3xl py-8 prose md:prose-lg lg:prose-xl dark:prose-invert">
<div className="mb-8 text-center">
<time dateTime={post.date} className="mb-1 text-xs text-gray-600">
{post && post.date
? format(parseISO(post.date), "LLLL d, yyyy")
: ""}
</time>
<h1 className="text-3xl font-bold">{post.title}</h1>
<p className="prose-free">{post.description}</p>
{post.coverImage &&
(post.url ? (
<Link href={post.url} aria-label={`Link to ${post.title}`}>
<Image
src={post.coverImage}
alt={post.title || ""}
width={600}
height={400}
layout="responsive"
className="object-cover object-center md:h-36 lg:h-48"
priority
/>
</Link>
) : (
<Image
alt={post.title || ""}
src={post.coverImage}
width={600}
height={400}
layout="responsive"
className="object-cover object-center md:h-36 lg:h-48"
priority
/>
))}
</div>
<div
className="[&>*]:mb-3 [&>*:last-child]:mb-0"
dangerouslySetInnerHTML={{ __html: post.body.html }}
/>
</article>
</div>
);
};
export default PostLayout;
If you now visit, /blog page now you should be able to see two blog posts:
Setup Lucide Icons
Let's add some beautiful icons to our project :
We will be using lucide icons (lucide.dev) an open source svg icons library, it uses svg compression and it supports tree-shaking (meaning only ship the icons you use)l. So only the imported icons contribute to the weight of the files and reduce file size.
npm install lucide-react
For nextjs, we gonna use the dynamic imports
Update our next.config.mjs to this :
// @ts-check
/** @type {import('next').NextConfig} */
import { withContentlayer } from "next-contentlayer2";
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
transpilePackages: ["lucide-react"], // add this
};
export default withContentlayer(nextConfig);
Creating a reusable Icon component to use our Lucide Icons dynamically :
src/components/Icon.tsx
"use client";
import dynamic from "next/dynamic";
import { LucideProps } from "lucide-react";
import dynamicIconImports from "lucide-react/dynamicIconImports";
interface IconProps extends LucideProps {
name: keyof typeof dynamicIconImports;
}
const Icon = ({ name, ...props }: IconProps) => {
const LucideIcon = dynamic(dynamicIconImports[name]);
return <LucideIcon {...props} className="dark:text-white text-black" />;
};
export default Icon;
Then we can use this anywhere with the icons like:
import Icon from './Icon';
//Usage
const App = () => {
// before
// return <Camera color="red" size={48} />;
//after (renders the icon dynamically only when required)
return <Icon name='camera' color="red" size={48} />
};
export default App;
That's it for the part1, we have setup the base for our frontend.
In the next part (PART-2), we will be setting up the website layout by building all the components required.
Thanks.