Coder Social home page Coder Social logo

zeon-studio / nextplate Goto Github PK

View Code? Open in Web Editor NEW
324.0 3.0 214.0 703 KB

Nextplate is a free starter template built with Next.js and TailwindCSS. It provides you with almost everything you need to jump-start your Next.js project. Try Nextplate and save yourself hours of work.

Home Page: https://zeon.studio/preview?project=nextplate

License: MIT License

JavaScript 5.91% TypeScript 83.49% SCSS 9.19% Dockerfile 1.41%
nextjs-blog nextjs-boilerplate nextjs-starter nextjs-template tailwind-css-template boilerplate-template jamstack jamstack-theme js-boilerplate mit-license

nextplate's People

Contributors

hassanferdous avatar lorenzobaronio22 avatar sarveshmishra avatar schmitt-christopher avatar tffarhad avatar tfsojon avatar tfsomrat avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

nextplate's Issues

Error building app on Windows machine

Windows specific issue


npm run build

image

Solution: to update code to system agnostic path separator.

`const fs = require("fs");
const path = require("path");
const matter = require("gray-matter");

const CONTENT_DEPTH = 2;
const JSON_FOLDER = "./.json";
const BLOG_FOLDER = "src/content/blog";

// get data from markdown
const getData = (folder, groupDepth) => {
const getPath = fs.readdirSync(folder);
const removeIndex = getPath.filter((item) => !item.startsWith('_'));

const getPaths = removeIndex.flatMap((filename) => {
const filepath = path.join(folder, filename);
const stats = fs.statSync(filepath);
const isFolder = stats.isDirectory();

if (isFolder) {
  return getData(filepath, groupDepth);
} else if (filename.endsWith(".md") || filename.endsWith(".mdx")) {
  const file = fs.readFileSync(filepath, "utf-8");
  const { data, content } = matter(file);
  const pathParts = filepath.split(path.sep);
  const slug = data.slug || pathParts.slice(CONTENT_DEPTH).join('/').replace(/\.[^/.]+$/, "");
  const group = pathParts[groupDepth];

  return {
    group: group,
    slug: slug,
    frontmatter: data,
    content: content,
  };
} else {
  return [];
}

});

return getPaths.filter((page) => page && !page.frontmatter?.draft);
};

// flatten nested arrays (may not be needed anymore due to flatMap)
const flatten = (arr) => arr.reduce((acc, val) => acc.concat(val), []);

try {
if (!fs.existsSync(JSON_FOLDER)) {
fs.mkdirSync(JSON_FOLDER);
}

const data = getData(BLOG_FOLDER, 2);
fs.writeFileSync(${JSON_FOLDER}/posts.json, JSON.stringify(flatten(data)));

const posts = require(../${JSON_FOLDER}/posts.json);
fs.writeFileSync(${JSON_FOLDER}/search.json, JSON.stringify(posts));
} catch (err) {
console.error(err);
}
`

image

Text capitalization and navigation bar

There should be a way to disable the text capitalization in buttons and other elements that use it so that other languages can be supported.

If you open the navigation menu on a small screen and then enlarge the window, the menu remains open. There should also be a way to disable the header and footer on selected pages.

Is this site static? Or SSR.

Hi I'm pretty new to Nextjs and I loved the boilerplate, just got a couple of questions on how it works.

I was under the impression the idea behind this template is that it's a template for a static site (or at least supports SSG), however it seems like because of the use of fs in lib/contentparser.ts and the way that it is pulling the files at render time not build time is forcing this to be rendered server side rather than rendering the html at build time.

Module not found: Can't resolve 'fs'
> 1 | import fs from "fs";
  2 | import matter from "gray-matter";
  3 | import { notFound } from "next/navigation";
  4 | import path from "path";

Is this correct functionality or have I read something wrong when going through the code?

I noticed the tag static-site was used so it was surprising for it not to automatically output html/css after build.

It would be awesome for this functionality to support SSG as well as SSR, as it seems SSR for what is effectively Markdown seems a little overkill.

npm or yarn nor any dependencies are not installing at all

(Windows user)Seems like i have good internet connection of 210mbps . But any installation process of the dependencies after cloning of the project doesn't work at all.
npm install shows this for hours(image attached below) and yarn install shows you have trouble with your internet connection.

Am i doing something wrong here?
Screenshot 2024-01-02 160225

Responsive Navbar

When the Navbar menu is expanded on smaller screens and the window is resized to a larger size, it remains open.

Default scroll restoration not working in Nextplate app

When using Next.js, the default scroll restoration behavior is expected to automatically scroll the page to the top (position 0) when navigating to a new route. However, in the Nextplate app, this default behavior does not seem to be working correctly.

Currently, when navigating to a new route in the Nextplate app, the scroll position is not being reset to the top as expected. This can cause confusion and inconvenience for users, especially when they expect the page to start from the beginning when switching between routes.

It is important to resolve this issue to provide a seamless user experience and ensure consistent behavior with the default Next.js scroll restoration functionality.

Steps to Reproduce:

Open the Nextplate app.
Navigate to a different route within the app.
Observe that the scroll position does not reset to the top of the page.
Expected Behavior:
When navigating to a new route in the Nextplate app, the scroll position should reset to the top of the page by default, just like in a regular Next.js application.

Actual Behavior:
The scroll position in the Nextplate app does not reset to the top when navigating to a new route, deviating from the default Next.js behavior.

Please note that this issue may affect the overall user experience of the Nextplate app and should be addressed to provide a consistent and intuitive browsing experience.

Suggestion: SEO improvements and tracking

I have some suggestions that I believe could improve Nextplate's SEO.

Enhancing the SEO of Nextplate could be achieved by incorporating schemas and canonical tags for the pages. Additionally, it would be beneficial to add support for Google Analytics/Google Tag Manager and other tracking tools, along with a cookie/acceptance banner.

Regarding the sitemap, all the blog posts have "Changefreq" set to daily, with the same priority levels and "lastmod" date. Could it also be possibility to maybe remove the "next-sitemap" package and replace it with Next.js 14's native SEO solutions like robots.txt and a sitemap generator?

Thank you for considering these changes!

Difficulty Creating Blogs and Integrating Sanity CMS in Nextpalate Repository

Issue Description:
I'm facing challenges in creating blogs for the Nextpalate repository, which uses Next.js. I've noticed that the blogs are stored in Markdown (.md) files. I'm uncertain about the process of creating blogs and wonder if there's a way to edit them virtually.

Questions:

  • How can I create blogs in the Nextpalate repository using Next.js?
  • Is there a preferred structure/format for the Markdown files used for blogs?
  • Is it possible to edit blogs virtually, perhaps through a CMS or another tool?
  • Has anyone successfully integrated Sanity CMS with the Nextpalate repository for easy blog editing?
  • If so, are there any guidelines or steps to follow for integrating Sanity CMS with the repository?

Additional Context:
I've explored the repository and documentation but couldn't find specific information on blog creation and editing. Any guidance or assistance on this matter would be greatly appreciated.

Issue with useRouter in Custom Next.js Project Structure (Nextplate Template)

I'm using the Nextplate template for my Next.js project, which has a unique structure with pages located in src/app instead of the standard pages directory. I'm encountering an issue with useRouter, specifically receiving the error: "NextRouter was not mounted".

Could you provide guidance on how to correctly use useRouter or an alternative method for dynamic routing and data fetching in this non-standard setup? Any insights or documentation specific to handling routes and data fetching in the Nextplate template would be greatly appreciated.

Thank you!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.