🚀 Nextjs Blog Boilerplate is starter code for your blog based on Next framework. ⚡️ Made with Nextjs, TypeScript, ESLint, Prettier, PostCSS, Tailwind CSS.

  • By Remi W.
  • Last update: Jan 4, 2023
  • Comments: 5

Next js Blog Boilerplate with Tailwind CSS

Nextjs starter banner

🚀 Next.js Blog Boilerplate is starter code for your blog based on Next.js 10+ framework with Tailwind CSS 2.0. ⚡️ Made with Next.js, TypeScript, ESLint, Prettier, PostCSS, Tailwind CSS.

Clone this project and use it to create your own Next.js blog. You can check a Next js blog templates demo.

Features

Blog feature:

  • 🎈 Syntax Highlighting with Prism.js
  • 🤖 SEO metadata and Open Graph tags
  • ⚙️ JSON-LD for richer indexing
  • 📖 Pagination
  • 🌈 Include a FREE minimalist blog theme
  • ⬇️ Markdown
  • 💯 Maximize lighthouse score

Developer experience first:

Built-in feature from Next.js:

  • ☕ Minify HTML & CSS
  • 💨 Live reload
  • ✅ Cache busting

Philosophy

  • Minimal code
  • SEO-friendly
  • 🚀 Production-ready

Requirements

  • Node.js and npm

Premium Themes (Nextjs Themes)

Blue Dark Nextjs Theme Blue Eclatant Nextjs Theme
Blue Dark Nextjs Theme premium Blue Eclatant Nextjs Theme premium
Blue Modern Nextjs Theme Blue Minimalist Nextjs Theme
Blue Modern Nextjs Theme premium Blue Minimalist Nextjs Theme premium

Getting started

Run the following command on your local environment:

git clone --depth=1 https://github.com/ixartz/Next-js-Blog-Boilerplate.git my-project-name
cd my-project-name
npm install

Then, you can run locally in development mode with live reload:

npm run dev

Open http://localhost:3000 with your favorite browser to see your project.

.
├── _posts            # Your blog posts
├── public            # Static files
│   ├── assets
│   │   └── images
│   │       └── posts # Images used in your blog posts
└── src
    ├── pages         # Next.js pages
    ├── styles        # Your blog CSS files
    └── templates     # Blog templates

Customization

You can easily configure Next js Boilerplate. Please change the following file:

  • public/apple-touch-icon.png, public/favicon.ico, public/favicon-16x16.png and public/favicon-32x32.png: your blog favicon, you can generate from https://favicon.io/favicon-converter/
  • public/assets/images/logo.png, public/assets/images/logo-32x32.png: your blog logo
  • src/styles/main.css: your blog CSS file using Tailwind CSS
  • src/utils/Config.ts: configuration file like blog name, url, etc.
  • src/templates/Main.tsx: blog theme

Deploy to production

You can see the results locally in production mode with:

$ npm run build
$ npm run start

The generated HTML and CSS files are minified (built-in feature from Next js). It will also removed unused CSS from Tailwind CSS.

You can create an optimized production build with:

npm run build-prod

Now, your blog is ready to be deployed. All generated files are located at dist folder, which you can deploy with any hosting service.

Deploy to Netlify

Clone this repository on own GitHub account and deploy to Netlify:

Netlify Deploy button

Contributions

Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.

License

Licensed under the MIT License, Copyright © 2020

See LICENSE for more information.

Made with ♥ by CreativeDesignsGuru

Sponsor Next JS Boilerplate

Github

https://github.com/ixartz/Next-js-Blog-Boilerplate

Comments(5)

  • 1

    Doesn't work with Yarn and Next.js 12.0.7

    After cloning the project, I ran:

    yarn
yarn dev

    When loaded the app page in Chrome, the console output:

    error - ./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[2]!./src/styles/main.css
TypeError: Cannot read property 'theme' of undefined
  • 2

    Update the publish directory for netlify.toml

    Howdy there!

    Looks like you're using Next v12. With Next on Netlify, we need to modify where we're setting the output directory too. I think you can actually remove it from there all together and default to using .next. See here for the source https://github.com/netlify/netlify-plugin-nextjs

    So far it looks like if you use the Deploy to Netlify Button to deploy the project, it will fail:

    Deploy Log 
    9:35:26 AM: ────────────────────────────────────────────────────────────────
9:35:26 AM:   Plugin "@netlify/plugin-nextjs" failed                        
9:35:26 AM: ────────────────────────────────────────────────────────────────
9:35:26 AM: ​
9:35:26 AM:   Error message
9:35:26 AM:   Error: The directory "out" does not contain a Next.js production build. Perhaps the build command was not run, or you specified the wrong publish directory.
9:35:26 AM:   Your publish directory is set to "out", but in most cases it should be ".next".
9:35:26 AM:   If you are using "next export" then you should set the environment variable NETLIFY_NEXT_PLUGIN_SKIP to "true".
9:35:26 AM: ​
9:35:26 AM:   Plugin details
9:35:26 AM:   Package:        @netlify/plugin-nextjs
9:35:26 AM:   Version:        4.2.4
9:35:26 AM:   Repository:     git+https://github.com/netlify/netlify-plugin-nextjs.git
9:35:26 AM:   npm link:       https://www.npmjs.com/package/@netlify/plugin-nextjs
9:35:26 AM:   Report issues:  https://github.com/netlify/netlify-plugin-nextjs/issues

    If you're open to it, I think this should be a small fix but could even help out the Next-js-Boilerplate project too. I can try to open a PR for it today!

  • 3

    TypeError: Cannot read property 'theme' of undefined after first start

    git clone --depth=1 https://github.com/ixartz/Next-js-Blog-Boilerplate.git website-next-js cd website-next-js/ yarn yarn run dev

    results in:

    yarn run v1.22.10 $ next ready - started server on 0.0.0.0:3000, url: http://localhost:3000 info - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5 error - ./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[2]!./src/styles/main.css TypeError: Cannot read property 'theme' of undefined

  • 4

    Bump ini from 1.3.5 to 1.3.8 [Dependencies updated manually, not needed anymore]

    Bumps ini from 1.3.5 to 1.3.8.

    Commits
    • a2c5da8 1.3.8
    • af5c6bb Do not use Object.create(null)
    • 8b648a1 don't test where our devdeps don't even work
    • c74c8af 1.3.7
    • 024b8b5 update deps, add linting
    • 032fbaf Use Object.create(null) to avoid default object property hazards
    • 2da9039 1.3.6
    • cfea636 better git push script, before publish instead of after
    • 56d2805 do not allow invalid hazardous string as section name
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by isaacs, a new releaser for ini since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 5

    Bump next from 9.5.3 to 9.5.4 [Dependencies updated manually, not needed anymore]

    Bumps next from 9.5.3 to 9.5.4.

    Release notes

    Sourced from next's releases.

    v9.5.4

    This upgrade is completely backwards compatible and recommended for all users on versions below 9.5.4. For future security related communications of our OSS projects, please join this mailing list.

    A security team from one of our partners noticed an issue in Next.js that allowed for open redirects to occur.

    Specially encoded paths could be used with the trailing slash redirect to allow an open redirect to occur to an external site.

    In general, this redirect does not directly harm users although can allow for phishing attacks by redirecting to an attackers domain from a trusted domain.

    We recommend upgrading to the latest version of Next.js to improve the overall security of your application.

    How to Upgrade

    • We have released patch versions for both the stable and canary channels of Next.js.
    • To upgrade run npm install next@latest --save

    Impact

    • Affected: Users of Next.js between 9.5.0 and 9.5.3
    • Not affected: Deployments on Vercel (https://vercel.com) are not affected
    • Not affected: Deployments using next export

    We recommend everyone to upgrade regardless of whether you can reproduce the issue or not.

    How to Assess Impact

    If you think users could have been affected, you can filter logs of affected sites by %2F with a 308 response.

    What is Being Done

    As Next.js has grown in popularity, it has received the attention of security teams and auditors. We are thankful to those that reached out for their investigation and discovery of the original bug and subsequent responsible disclosure.

    We've landed a patch that ensures encoding is handled properly for these types of redirects so the open redirect can no longer occur.

    Regression tests for this attack were added to the security integration test suite.

    • We have notified known Next.js users in advance of this publication.
    • A public CVE was released.
    • If you want to stay on top of our security related news impacting Next.js or other Vercel projects, please join this mailing list.
    • We encourage responsible disclosure of future issues. Please email us at [email protected]. We are actively monitoring this mailbox.

    Core Changes

    • Make the image post-processor ignore SVG images: #16732
    • Only update lookups for dev overlay if mounted: #16776
    • Ensure interpolating dynamic href values works correctly: #16774
    • Add automatic reloading when editing GS(S)P methods: #16744
    • Update to show build indicator while re-fetching GS(S)P data in dev: #16789

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

Popular Tag

Related