Athena

Minimal Blog/Magazine NextJS Template

DOCUMENTATION

• Doc version: 1.0
• Created: 01 Feb 2024
• Last update: 01 Feb 2024

OVERVIEW

Athena is a modern Blog/Magazine React NextJS template, focused on high speed and oriented to a very minimal style, the theme fits perfectly any kind of blog specially lifestyle, photography, personal, or coding blogs thanks to the vivid colors and clean design.

Purpose built to look great across all platforms and screen sizes. Athena has multiple home page layouts and post/page types along with other utility pages like Category, Author and Contact to ensure your website is fully featured.

Rest assured, Athena is rigorously tested for responsiveness and compatibility across all major browsers and devices, including Firefox, Chrome, Internet Explorer, and Safari. Its high degree of customization allows you to create an outstanding website layout based on Bootstrap 5.x grid system.

If you seek a website theme that truly enhances your online presence and maximizes visitor engagement, Athena is the ideal choice for you.

Main Features

• React 18, NextJs 14, App Router
• 03 Homepage Demos
• Multi Header Styles
• Creative and Unique Design
• React swiper slider
• 100% Responsive
• Nice and Clean Design
• Clean and commented code
• Valid Redux / Jsx Component / CSS3
• Easy to customize
• Flexible and multi-purpose
• Built On Bootstrap 5
• Detailed documentation
• Lifetime Free Update
• And much more…

What do you get?

• NextJS Template source code
• Documentation

Note

All images are just used for Preview Purpose Only. They are not part of the template and maybe NOT included in the final purchase files.

Change log

                                VERSION 1.0
                                - First release.
                            

GET STARTED

Folder Structure

Structure

layout.js Structure

Dependencies

package.json

                                "dependencies": {
                                    "isotope-layout": "^3.0.6",
                                    "next": "14.0.1",
                                    "react": "18.2.0",
                                    "react-dom": "18.2.0",
                                    "sass": "^1.69.5",
                                    "swiper": "^11.0.5",
                                    "wowjs": "^1.1.3"
                                }
                            

Create a Page

Create page pages\blank.js

                                export default function MyPage() {
                                    return(
                                        <>
                                            
Hello!
                                        
                                    )
                                }
                            

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

1. Download the latest version of the template to your device.
2. Connect to your hosting via FTP software
3. Upload the template folder you unzipped to your site folder
4. 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 -