Genz
Creative Personal Blog / Portfolio HTML Template
DOCUMENTATION
- Doc version: 4.0
- Created: 06 Decenber 2022
- Last update: 13 March 2025
OVERVIEW
VERSION 4.0: Update to NextJS 15 App Router - React 19.
Genz is a Clean, Modern and Creative new generation personal blog React NextJS template. This template dedicated to Technology, Lifestyle, Fashion, Beauty and Travel… Created for those who want to promote most interesting media. Presentation of this theme full-fill all required condition for blog lovers. Genz include all popular features that will help you in your story telling and present your content in a stylish manner.
This template includes both HTML source code (save $19) and Figma design file ( save $12), making it easy for you to change, extend, and develop the design to your liking.
This template fully supports Dark/Light mode. We use the browser’s localStorage API to store the user’s preference.
You can avoid expensive web development and minimize your design costs using Genz - Creative Personal Blog / Portfolio NextJS Template.
We used styled-components and carefully created custom components so that we don’t have to sacrifice performance. The styled component also provides an easy way to change the appearance of the entire website.
We have a dedicated support center for all of your support needs. It includes our Documentation and Ticket system for any questions you have.
Main Features
- 04 Homepages layout
- Dark / Light mode switcher
- 05 Posts archive layouts
- 03 Single Posts layouts
- Personal portfolio
- React, NextJs 15, NextJs 13
- React scroll-up
- React wow animation
- React swiper slider
- Sticky Header
- Google Fonts
- 100% Fully Responsive
- Nice and Clean Design
- Clean and commented code
- Easy to customize
- Flexible and multi-purpose
- Built On Bootstrap 5
- HTML5 & CSS3
- HTML source code(save $19)
- Figma design file ( save $12)
- Detailed documentation
- Lifetime Free Update
- And much more…
What do you get?
- NextJS source code
- Documentation
- HTML source code
- Figma design file
Note
All images are just used for Preview Purposes Only. They are not part of the template and maybe NOT included in the final purchase files.
Change log
VERSION 4.0
- Update to NextJS 15 - React 19.
VERSION 3.0
- Restructure the project.
- Divide into small components. Easy to modify.
- Get data from Json file.
- Improved Dark/Light mode
VERSION 2.1
- [fix] sidebar
VERSION 2.0
- [fix] bug on portfolio page
- [add] Dark / Light switcher
VERSION 1.0
- First release.
GET STARTED
Install and Development
- Run command
`npm install`to install all modules that are listed onpackage. jsonfile and their dependencies. - Then run command
`npm run dev`to initialize the development environment.
Folder Structure
Structure
_app.js Structure
Dependencies
package.json (Nextjs 15)
"dependencies": {
"next": "15.2.2",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"swiper": "^11.2.5"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"eslint": "^9",
"eslint-config-next": "15.2.2"
}
package.json (Nextjs 13)
"dependencies": {
"eslint": "8.28.0",
"eslint-config-next": "13.0.4",
"next": "13.0.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"sass": "^1.56.1",
"swiper": "^8.4.5",
"typewriter-effect": "^2.19.0",
"wowjs": "^1.1.3"
},
Create a Page
Create page pages\blank.js
function Blank() {
export function MyPage() {
return(
Hello!
)
}
export default Blank;
Routing
The Next.js router allows you to do client-side route transitions between pages, similar to a single-page application
A React component called Link is provided to do this client-side route transition.
In the example above we have multiple links, each one maps a path (href) to a known page:
- / → pages/index.js
- /page-about → pages/page-about.js
Any in the viewport (initially or through scroll) will be prefetched by default (including the corresponding data) for pages using Static Generation. The corresponding data for server-rendered routes is not prefetched.
Deployment
If you haven’t already done so, push your Next.js app to a Git provider of your choice: GitHub, GitLab, or BitBucket. Your repository can be private or public.
Then, follow these steps:
- Sign up to Vercel (no credit card is required).
- After signing up, you’ll arrive on the “Import Project” page. Under “From Git Repository”, choose the Git provider you use and set up an integration. (Instructions: GitHub / GitLab / BitBucket).
- Once that’s set up, click “Import Project From …” and import your Next.js app. It auto-detects that your app is using Next.js and sets up the build configuration for you. No need to change anything — everything should work just fine!
- After importing, it’ll deploy your Next.js app and provide you with a deployment URL
- To get more help on the deployment checkout
UPDATE
Important Note:
- Backup your website and template folders completely to make sure you have a restore point in case of any complications.
Update using FTP
- Download the latest version of the template to your device.
- Connect to your hosting via FTP software
- Upload the template folder you unzipped to your site folder
- You should be asked to confirm overwriting of this folder and its contents. Confirm the overwrite.
SOURCES & CREDITS
THANK YOU
Thank you so much for using this template.
- AliThemes Team -