All Projects → hayanisaid → said-hayani-nextjs

hayanisaid / said-hayani-nextjs

Licence: other
Said Hayani personal blog built with NextJs

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to said-hayani-nextjs

monorepo-typescript-next-the-sane-way
A monorepo example using TypeScript and Next.js
Stars: ✭ 104 (+511.76%)
Mutual labels:  nextjs
yearn-comms
Collection of communication, announcements, tweets, newsletters, and other articles about Yearn and a hosted blog for all translation contributors.
Stars: ✭ 16 (-5.88%)
Mutual labels:  nextjs
sage-next
familiar-zebra.surge.sh
Stars: ✭ 18 (+5.88%)
Mutual labels:  nextjs
airbnb-ish
Airbnb UI clone using Next.js + styled-components.
Stars: ✭ 122 (+617.65%)
Mutual labels:  nextjs
hckrnws
A custom frontend for a better reading experience of HackerNews
Stars: ✭ 20 (+17.65%)
Mutual labels:  nextjs
jamstack-preview-and-deployments
Preview and deploy NextJS applications from the wordpress admin.
Stars: ✭ 17 (+0%)
Mutual labels:  nextjs
Hangar
Hackathon sponsorship made easy
Stars: ✭ 34 (+100%)
Mutual labels:  nextjs
next-and-cypress-example
Next.js example instrumented for code coverage from Cypress tests
Stars: ✭ 111 (+552.94%)
Mutual labels:  nextjs
next-motion
page transitions with nextjs and framer motion api
Stars: ✭ 25 (+47.06%)
Mutual labels:  nextjs
jolvera.dev
Personal blog built with Next.js & Rebass
Stars: ✭ 36 (+111.76%)
Mutual labels:  nextjs
next-mdx-digital-garden-starter
An opinionated starting point for Digital Garden content authoring.
Stars: ✭ 50 (+194.12%)
Mutual labels:  nextjs
addtobasic.github.io
CUI Portfolio like ubuntu terminal.
Stars: ✭ 18 (+5.88%)
Mutual labels:  nextjs
nextjs-ecommerce
Next.js & Keystone.js E-commerce example with TypeScript
Stars: ✭ 59 (+247.06%)
Mutual labels:  nextjs
Batteries-Included-Next.js
A starting boilerplate for a TS Next.js project with batteries included. Tailwind CSS for styling, Jest and React Testing Library working with path aliases and node-mock-http for API route testing.
Stars: ✭ 35 (+105.88%)
Mutual labels:  nextjs
faeshare
MERN based social media web app made with the help of Next.js, Socket.io and TailwindCSS.
Stars: ✭ 37 (+117.65%)
Mutual labels:  nextjs
nextjs-baseweb
Slightly opinionated scaffold of Next.js and Base Web.
Stars: ✭ 46 (+170.59%)
Mutual labels:  nextjs
hn
💻 A personal Hacker News reader using Next.js
Stars: ✭ 43 (+152.94%)
Mutual labels:  nextjs
next-utils
🥩 🍳 A set of Next.js HoC utilities to make your life easier
Stars: ✭ 30 (+76.47%)
Mutual labels:  nextjs
basil
An experimental Magento 2 theme
Stars: ✭ 18 (+5.88%)
Mutual labels:  nextjs
nextjs-admin-template
Free admin dashboard template based on Next.Js with @paljs/ui component package
Stars: ✭ 266 (+1464.71%)
Mutual labels:  nextjs

This project was bootstrapped with Create Next App.

Find the most recent version of this guide at here. And check out Next.js repo for the most up-to-date info.

Table of Contents

Questions? Feedback?

Check out Next.js FAQ & docs or let us know your feedback.

Folder Structure

After creating an app, it should look something like:

.
├── README.md
├── components
│   ├── head.js
│   └── nav.js
├── next.config.js
├── node_modules
│   ├── [...]
├── package.json
├── pages
│   └── index.js
├── static
│   └── favicon.ico
└── yarn.lock

Routing in Next.js is based on the file system, so ./pages/index.js maps to the / route and ./pages/about.js would map to /about.

The ./static directory maps to /static in the next server, so you can put all your other static resources like images or compiled CSS in there.

Out of the box, we get:

  • Automatic transpilation and bundling (with webpack and babel)
  • Hot code reloading
  • Server rendering and indexing of ./pages
  • Static file serving. ./static/ is mapped to /static/

Read more about Next's Routing

Available Scripts

In the project directory, you can run:

npm run dev

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any errors in the console.

npm run build

Builds the app for production to the .next folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

npm run start

Starts the application in production mode. The application should be compiled with `next build` first.

See the section in Next docs about deployment for more information.

Using CSS

styled-jsx is bundled with next to provide support for isolated scoped CSS. The aim is to support "shadow CSS" resembling of Web Components, which unfortunately do not support server-rendering and are JS-only.

export default () => (
  <div>
    Hello world
    <p>scoped!</p>
    <style jsx>{`
      p {
        color: blue;
      }
      div {
        background: red;
      }
      @media (max-width: 600px) {
        div {
          background: blue;
        }
      }
    `}</style>
  </div>
)

Read more about Next's CSS features.

Adding Components

We recommend keeping React components in ./components and they should look like:

./components/simple.js

const Simple = () => <div>Simple Component</div>

export default Simple // don't forget to export default!

./components/complex.js

import { Component } from 'react'

class Complex extends Component {
  state = {
    text: 'World'
  }

  render() {
    const { text } = this.state
    return <div>Hello {text}</div>
  }
}

export default Complex // don't forget to export default!

Fetching Data

You can fetch data in pages components using getInitialProps like this:

./pages/stars.js

const Page = props => <div>Next stars: {props.stars}</div>

Page.getInitialProps = async ({ req }) => {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  const stars = json.stargazers_count
  return { stars }
}

export default Page

For the initial page load, getInitialProps will execute on the server only. getInitialProps will only be executed on the client when navigating to a different route via the Link component or using the routing APIs.

Note: getInitialProps can not be used in children components. Only in pages.

Read more about fetching data and the component lifecycle

Custom Server

Want to start a new app with a custom server? Run create-next-app --example customer-server custom-app

Typically you start your next server with next start. It's possible, however, to start a server 100% programmatically in order to customize routes, use route patterns, etc

This example makes /a resolve to ./pages/b, and /b resolve to ./pages/a:

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl

    if (pathname === '/a') {
      app.render(req, res, '/b', query)
    } else if (pathname === '/b') {
      app.render(req, res, '/a', query)
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(3000, err => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

Then, change your start script to NODE_ENV=production node server.js.

Read more about custom server and routing

Syntax Highlighting

To configure the syntax highlighting in your favorite text editor, head to the relevant Babel documentation page and follow the instructions. Some of the most popular editors are covered.

Deploy to Now

now offers a zero-configuration single-command deployment.

  1. Install the now command-line tool either via the recommended desktop tool or via node with npm install -g now.

  2. Run now from your project directory. You will see a now.sh URL in your output like this:

    > Ready! https://your-project-dirname-tpspyhtdtk.now.sh (copied to clipboard)
    

    Paste that URL into your browser when the build is complete, and you will see your deployed app.

You can find more details about now here.

Something Missing?

If you have ideas for how we could improve this readme or the project in general, let us know or contribute some!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].