GS500 The Coder

10/5/22

Getting started with docker

It is very simple to get started usig docker.
All you need to do-is download the docker desktop for your system
Once you get docker system running on your machine - you can start containers


docker run -d -p 80:80 docker/getting-started

Now you can see "docker/getting-started" container running on your machine

9/17/22

how to fetch data at nextJS

well - main thing application should do - is to display data.
so, you can fetch data from external source very simple:


export const getStaticProps = async () => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users`)
  const users = await res.json();
  return {
    props: { users }
  }
}

export default function Home({ users }) {
  return <div>{users.map(({id, name}) => <div key={id}>{name}</div>)}</div>
}

The difference here - is that now you have no 'loading' time when page is empty.
That is because data loading happens on the server side

9/15/22

Some post about nextJs framework

Grate thing about this framework is that you can write the whole applicaiton using react on client and server side:
Hows that possible? you may ask
Thing is - the nextJs is first of all, nodejs application, and node uses same javascript language for writing api and also for write views. Views can be html and also they can include javascript, and in case of nextJs - they also include react.
So, how to start use it?
All you need to do for starting a nextJs project is to write following command in your terminal:


npx create-next-app my-mynext-app

after installation finished, navigate to app folder and run


npm run dev

browse to http://localhost:3000 and see your app is runing now!
The main advantage of nextJs framework is - SEO.
crawler can access pages more easily than at classic react app.
notice: you page already has react component:


export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Welcome</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title} onClick={() => alert('hi')}>
          Welcome!!!
        </h1>
      </main>
    </div>
    )
}

you can click on the title and see 'alert' appears