index.js
export default function Home({posts}){
	return(
		<>
			<Head>
				<Title>Blog</Title>
			</Head>
			<h1>{{post.title}}</h1>
			<ul>
				{posts.map(post =><li>
					<Link href={'/blog/${post.id}'}>
						<a>
							{post.id} - {post.title}
						</a>
					</Link>
				<li>)}						
			</ul>
		</>
	)
}

export async function getStaticProps () {
	const posts = await fetch('url_api').then(r ->r.json())
	return {
		props: {
			posts
		}
	}
}

dossier blog/[id].js
export default function Post({post}) {
	return <>
		<main>
			<h1>{post.title}</h1>
		</main>
	</>
}
export async function getStaticProps ({params}) {
	const posts = await fetch('url_api/${params.id}').then(r ->r.json())
	return {
		props: {
			post
		}
	}
}
export async function getStaticPaths ({params}) {
	const posts = await fetch('url_api').then(r ->r.json())
	return {
		paths: posts.map(post =>({
			params: {id: post.id.toString()}
		})),
		fallback: false,
	}
}


2 - Snippet d'un composant classique

6 - Revenir en arrière (avec router.back)

import { useRouter } from 'next/router'
export default function Page() {
	const router = useRouter()
	return <button onClick={() => router.back()}>Click here to go back</button>
}


yarn add react-google-recaptcha
Clé de dev passe partout :
GOOGLE_RECAPTCHA_SITE_KEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
GOOGLE_RECAPTCHA_SECRET=6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe

import ReCAPTCHA from "react-google-recaptcha";

export ...{
	const recaptchaRef = React.createRef();

    	function sendEmail(e) {

        	e.preventDefault();
       		document.getElementById("recaptchaValue").value = recaptchaRef.current.getValue();
		...
    	}

	return (
	      ...
              {/* FOR TEST ONLY <div className="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div> */}
              <ReCAPTCHA
			sitekey="6Lfjg8gUAAAAAJLTNvdMtPNrxysJ6vi0iqu9dxsR"
                        ref={recaptchaRef}
               />

             <input type="hidden" id="recaptchaValue" name="recaptchaValue" />

	)
}


3 - RECAPTCHA GOOGLE

1 - Bases de Next.js - comment démarrer et commandes de bases

Créer projet :
composer create-project symfony/skeleton my_project_name
composer require api

yarn create next-app

yarn dev
yarn run dev
yarn next  build
yarn start
yarn run build
yarn next export
php -S localhost:8000 -t out   // Pour voir le résultat du build
Sur OVH, faire pointer sur le dossier et attendre quelques minutes



// Ajouter dans root/config.next.js
<§
module.exports = {
    trailingSlash: true
}
§>


Résoudre export sans les .html

// example dispo sur : [next.js/examples/with-static-export at canary · vercel/next.js · GitHub](https://github.com/vercel/next.js/tree/canary/examples/with-static-export)

// la fonction getStaticProps peut se mettre juste après les import
<§
export async function getStaticProps() {
  // fetch list of posts
  const response = await fetch(
    'https://jsonplaceholder.typicode.com/posts?_page=1'
  )
  const postList = await response.json()
  return {
    props: {
      postList,
    },
  }
}
§>

// Puis sur le chemin dynamique dans /pages/post/[id].js
<§
export async function getStaticPaths() {
  const response = await fetch(
    'https://jsonplaceholder.typicode.com/posts?_page=1'
  )
  const postList = await response.json()
  return {
    paths: postList.map((post) => {
      return {
        params: {
          id: `${post.id}`,
        },
      }
    }),
    fallback: false,
  }
}
§>

<§
export async function getStaticProps({ params }) {
  // fetch single post detail
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.id}`
  )
  const post = await response.json()
  return {
    props: post,
  }
}
§>

// La tronche du json sortant de props: post :
{
  "userId": 1,
  "id": 2,
  "title": "qui est esse",
  "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
}

// On peut ainsi utiliser title et body en entrée de props
export default function Post({ title, body }) {
  return (
    <main>
      <Head>
        <title>{title}</title>
      </Head>

      <h1>{title}</h1>

      <p>{body}</p>

      <Link href="/">
        <a>Go back to home</a>
      </Link>
    </main>
  )
}

Définir une route dynamique

// Avoir bien ajouté la langue dans le projet :
<§
module.exports = {
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
}§>

Checklist fin de projet

4 - Distinguer dev et prod pour le data fetching

https://github.com/bradtraversy/next-crash-course
- créer à la racine un dossier config
- créer un fichier index.js et y ajouter :
const dev = process.env.NODE_ENV !== 'production'
export const server = dev ? 'http://localhost:3000' : 'https://mywebsite.com'
- dans le fichier de la page :
import {server} from '../config'

export const getStaticProps = async () => {
	const res = await fetch(‘${server}/api/articles‘)
	const articles = await res.json()
}

{variable && <div>content</div>}
{variableTest > 5 ? "ça" : "sinon ça" }


Next.js