18 February, 2021
Guide Fari

NextJs Project structure



uses a configuration set up by Wes Bos

    "extends": [


This is to set up your netlify deploy using a config file, instead of the GUI.


To optimize images hosted on another domain other than your own.

  • Nextjs docs

    images: {
    domains: ['images.unsplash.com'],
  • raw-loader docs
  • follow this tutorial to get some context of why we need this.

    webpack(config) {
      test: /\.md$/,
      use: 'raw-loader',
    return config;


This is where all the static assets live:


All site pages live here. [slug].js files are the pages that make use of Dynamic routing. That concept took me a while to wrap my head around, so don't sweat it if you don't get it the first time round or immediately.


Global component. In our case, it's used to import the global css, and write some basic site wide meta tags.



the only thing to note here is the import of the fonts.css file.


I don't think the posts.js file is still being used😅


These are grouped in folders that follow a subjective hierarchy. the sub folders so far are

  • Author - All author specific components
  • Home - All components that are used on the home page
  • Layout - header, footer & layout component. layout.jsx is what ties them together, and makes use of the {children} prop.


This is the seo component I've been using for my react projects. I'm happy to explain any line of this code, the goal is for you to be able to explain what each line is doing in natural language, and it touches on a few ES6 concepts - so take your time with it.


this is what's used to implement the social media share. uses the react-share package.