NextGen blog is an efficient, scalable, and user-friendly web application. Utilizing Next.js 14, the latest version of the React framework, this application not only embraces server-side rendering and static site generation for optimal performance but also leverages the recently introduced partial prerendering in Next.js 14.
- Live Demo: https://nextjs-blog-delta-one-66.vercel.app/
- /app: Contains all the routes, components, and logic for the application.
- /app/lib: Contains reusable utility functions and data fetching functions.
- /app/ui: Contains all the UI components such as cards, tables, and forms.
- /public: Contains all the static assets.
- /scripts: Contains a seeding script to populate database.
First, clone the repository to your local machine using Git. Open a terminal and run the following command:
git clone https://github.com/thewebsitedev/nextjs-blog.git
cd nextjs-blog
Now install the project dependencies using npm:
npm install
Or if you prefer using yarn, simply run:
yarn
You will need to setup a repository on GitHub and push the code to the repository. You can follow the guide on Github.
You will need to setup a vercel account and connect it to your GitHub account. You can follow the guide on Vercel. If you don't already have an account then you can create one here. Once done, select the free hobby plan.
Next, import your repository to Vercel. You can follow the guide on Vercel. Once done, you can deploy the project by clicking on the deploy button. You can follow the guide on Vercel.
Once the project is deployed, you will need to create a Postgres databased on Vercel. On the project page, select the storage tab. Select Connect Store, and then select Postgres under connect new and then click continue. Name your database and click create. Once connected, go to .env.local tab, click show secret and copy snippet.
The project requires certain environment variables to be set for features like database access and authentication to work correctly. You'll need to create a .env.local file in the root of the project directory. Here's a template of what should be included:
POSTGRES_URL=
POSTGRES_PRISMA_URL=
POSTGRES_URL_NON_POOLING=
POSTGRES_USER=
POSTGRES_HOST=
POSTGRES_PASSWORD=
POSTGRES_DATABASE=
AUTH_SECRET=
AUTH_URL=
You will need to add the copied snippet in the previous step to the .env.local file. Rename .env.example in the project root folder to .env.local and add the copied snippet to the file replacing the postgres variables.
Note: generate auth secret using this command
openssl rand -base64 32in your terminal.
Note: for auth url use "http://localhost:3000/api/auth".
Note: add
SECRETandAUTH_SECRETto vercel environment variables. Go to project page, click settings tab and then click environment variables tab. Add the variables and click save. Thsi is required for authentication to work properly.
To seed the database with some dummy data, run the following command:
npm run seed
Or if you're using yarn:
yarn seed
Finally, you can run the project in development mode using the following command:
npm run dev
Or if you're using yarn:
yarn dev
Or using vercel
vercel dev
You can login using the following credentials:
email: user[at]thewebsitedev.com
password: 123456
By integrating Tailwind CSS, a utility-first CSS framework, the project benefits from a highly customizable and responsive design, ensuring that the blog is as aesthetically pleasing as it is functional. Tailwind's component-friendly architecture, coupled with Headless UI and Heroicons, enables a rich, interactive user interface without sacrificing accessibility or usability.
I have utlizes bcrypt for hashing and securely managing user passwords, and Next-Auth for handling authentication and session management. This ensures that the user data is secure. I have also used the @vercel/postgres library to manage the database. This ensures that the application can handle growth without compromising on performance. I have made use of a middleware to ensure that only authenticated users can access certain routes. This ensures that the application is secure.
The user can logout and end session by clicking on the logout button in the navbar.
Pages:
- Login - /login
- Register - /signup
The utilization of Zod for schema validation emphasizes the project's dedication to reliability and robust data handling. The forms are validated on both the client and server side to ensure that the data is valid and consistent.
All the posts are visible on the homepage with proper pagination. The user can also edit and delete their posts from the dashboard. The user can also view all the posts on the homepage. The user can also view a single post by clicking on the post card. The user can also view all the posts in a category by clicking on the category name.
The user can also search for posts by typing in the search bar.
Users can create, edit and delete their own blog posts. Once logged in, a user can navgiate to the dashboard page /dashboard where they can create a new post.
The project utilizes modern JavaScript libraries and frameworks, such as React Markdown for rendering markdown content, react-toastify for displaying notifications, and use-debounce for enhancing user input handling.
The project's use of Next.js 14's built-in SEO optimization features, such as automatic generation of meta tags and canonical links, ensures that the blog is optimized for search engines. The inclusion of the next-sitemap library further enhances the blog's SEO capabilities by generating a sitemap for the application.
Main metadata for the blog is defined in the layout.tsx file in the root of the app folder. For dynamic metadata, generateMetadata() function is used wherever appropriate.
Opengraph: opengraph-image.png in the root of the app folder is used to generate the og:image meta tag for the blog's homepage.
The project utlizes the DRY principle to ensure that code is reusable and maintainable. The use of React components, such as the PostCard component, allows for the creation of a consistent and cohesive user interface, while the use of React hooks, such as useDebounce, ensures that code is efficient.
I have used SSR for blog posts. This means that the blog posts are rendered on the server and sent to the client as HTML. This ensures that the blog posts are SEO optimized and load faster. I have utilised partial prerendering for the blog posts. This means that the blog posts are only prerendered when they are visited. This ensures that the blog posts are not prerendered unnecessarily. For posts to appear gracefully, I have used Suspense from React to display a loading skeleton while the post is being fetched. This ensures that the user experience is not compromised
I have added categories to the blog. This means that each post can be assigned a category. I have also added category pages. This means that each category has its own page. This ensures that the blog is more organized and easier to navigate.
Since it is a very new feature therefore I had to spend some time reading the documentation to understand it properly.
I went with Next-Auth for authentication. I had to spend some time reading the documentation to understand it properly. Since I used a postgres database, I made use of the credentials provider instead of going through the API route using JWT tokens. Moving forward, Next.js will favouring the use of server authentication instead of client authentication to minimise security concerns introduced with API calls. Therefore, I decided to go with the credentials provider.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent