Sarsa - NextJS Template For News & Magazine - Docs

Installation

Install all the necessary packages and dependencies following this page.

Folder Structure

Understand the sarsa projects folder structure

/components
    /elements
        /BackToTop.js
        /AdventureIsotope.js
        /BlogSidebar.js
        /MinimalIsotope.js
        /...
    /layout
        /Footer.js
        /Header.js
        /Layout.js
        /...
    /slider
        /Basic.js
        /HeaderInstagram.js
        /InstagramSidebarSlider.js
        /InteriroSlider.js
        ...
/pages
    /blog
        /[id].js
    /_app.js
    /index-2.js
    /index-3.js
    /index-4.js
    ........
/public
/.gitignore
/package.json
/package-lock.json
/README.md

Structure

Then understand the _app.js component Structure

import Preloader from "@/components/elements/Preloader";
import { useEffect, useState } from "react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "../public/assets/css/animate.min.css";
import "../public/assets/css/bootstrap.min.css";
import "../public/assets/css/flaticon.css";
import "../public/assets/css/fontawesome-all.min.css";
import "../public/assets/css/imageRevealHover.css";
import "../public/assets/css/magnific-popup.css";
import "../public/assets/css/main.css";
import "../public/assets/css/slick.css";
import "../public/assets/css/spacing.css";
import "../public/assets/css/swiper-bundle.css";

function MyApp({ Component, pageProps }) {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  }, []);
  return <>{!loading ? <Component {...pageProps} /> : <Preloader />}</>;
}

export default MyApp;

Dependencies

package.json

"dependencies": {
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
    "isotope-layout": "^3.0.6",
    "next": "13.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-fast-marquee": "^1.3.5",
    "react-modal-video": "^2.0.0",
    "sass": "^1.59.3",
    "swiper": "^9.1.1",
    "typewriter-effect": "^2.19.0",
    "wowjs": "^1.1.3"
}

Create a Page

Create page pages\blank.js

export default function Blog() {
  return <h1>Hello!</h1>;
}

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.

import Link from 'next/link'

export default function Menu() {
    (...)
    return(
        <ul className="sub-menu">
            <li className={router.pathname == "/" ? "active" : ""}><Link href="/">Home Default</Link></li>
            <li className={router.pathname == "/index-2" ? "active" : ""}><Link href="/index-2">Home Interior</Link></li>
            <li className={router.pathname == "/index-3" ? "active" : ""}><Link href="/index-3">Home Travel</Link></li>
            <li className={router.pathname == "/index-4" ? "active" : ""}><Link href="/index-4">Home Technology</Link></li>
            <li className={router.pathname == "/index-5" ? "active" : ""}><Link href="/index-5">Home NFT</Link></li>
            <li className={router.pathname == "/index-6" ? "active" : ""}><Link href="/index-6">Home Fashion</Link></li>
            <li className={router.pathname == "/index-7" ? "active" : ""}><Link href="/index-7">Home Adventure</Link></li>
            <li className={router.pathname == "/index-8" ? "active" : ""}><Link href="/index-8">Home Minimal</Link></li>
        </ul>
            ...
            ...
    )
}

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 https://vercel.com/solutions/nextjs#the-easiest-way-to-deploy

Important Note:

Backup your website and template folders completely to make sure you have a restore point in case of any complications.