14. Next.js Tutorial (1)

 1. Introduction. (No Next.js) Basic example. Load React, React-Dom, and Bable from unpkg.com

!-- index.html -->
<html>
  <body>
    <div id="app"></div>

    <!-- React-->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- React-DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- Babel Script -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
   
    <!--script type="text/javascript"-->
    <script type="text/jsx">
      const app = document.getElementById('app');
      ReactDOM.render(<h1>Develop. Preview. Ship. </h1>, app);
    </script>
  </body>
</html>

Three dependencies are enclosed in yellow. The red line uses React functions and "jsx" code

2. Create a Nextjs application

Let's follow these steps:

npx create-next-app@latest my-app10 --ts
cd my-app10
npm install clsx // (optional) Install clsx library to toggle classes
npm install -D tailwindcss autoprefixer postcss // (optional) Install tailwindcss
npm install -D sass // (optional) Install Sass
npm install remark remark-html // (optional) Install remark library
npm run dev


3. Navigating between pages (next/link component- client-side navigation)

The main page, (index.tsx) is in the my-app10/pages folder, it is accessed by 

http://localhost:3000/

if you create a page (first-post.tsx)  in my-app10/pages/posts folder, with this code (Note the import Link statement:


import Link from "next/link";

export default function FirstPost() {
    return (
      <>
        <h1>First Post</h1>
        <h2>
          <Link href="/">Back to home</Link>
        </h2>
      </>  
    );
  }


it is accessed by 

http://localhost:3000/posts/first-post

In the index.tsx page you should also import the Link function and you can navigate to it as

<Link href="/posts/first-post">Read this page....!</Link>

NOTE: There is a great difference between using <Link href="/" > and <a href="/" >, the second produces a reload effect so it is slower.

NOTE: No routing libraries are needed with Next.js.

NOTE: If you need to link to an external page outside the Next.js app, just use a <a> tag without Link.

4. Static Assets (Images, metadata, javascript,CSS..)

Assets can be placed in my-app10/public folder. The files in this directory can be referenced from the root application similar to pages 

4.1 Images (next/image component)

The Image function from Next.js is useful for optimization. Here is the code of a function that uses an image

import Image from 'next/image';

//const GosImage = () => (
export function GosImage () {
    return(
        <Image
            src="/images/gos.jpg" // Route of the image file (my-app10/public/image/gos.jpg)
            height={144} // Desired size with correct aspect ratio
            width={144} // Desired size with correct aspect ratio
            alt="Gos d'Edu"
        />
    );
}

4.2. Metadata

Ref: https://nextjs.org/learn/basics/assets-metadata-css/metadata

With this page, the Head element is added and display its metadata:

import Link from "next/link";
import Head from "next/head"

export default function FirstPost() {
    return (
      <>
        <Head>
          <title>First Post Edu</title> // Metadata
        </Head>
        <h1>First Post Pepe</h1>
        <h2>
          <Link href="/">Back to home</Link>
        </h2>
      </>  
    );
  }

NOTE: the my-app10/pages/_document.js file has customization (language ..)

4.3. Third-party javascript (next/script component)

Ref: https://nextjs.org/learn/basics/assets-metadata-css/third-party-javascript

You can add javascript to the <Head> component to load the script as quickly as possible.

<Head>
  <title>First Post</title>
  <script src="https://connect.facebook.net/en_US/sdk.js" />
</Head>

But it's better to use the <Script> component

import Link from "next/link";
import Head from "next/head"
import Script from "next/script";

export default function FirstPost() {
    return (
      <>
        <Head> <title>First Post Edu</title> </Head>
        <Script
          src="https://connect.facebook.net/en_US/sdk.js" 
          strategy="lazyOnload"
          onLoad={() => console.log(`script loaded correctly, window.FB has been populated`) }
        />
        <h1>First Post Pepe</h1>
        <h2> <Link href="/">Back to home</Link> </h2>
      </>  
    );
  }

Note the lazy loading strategy and the console log after loaded the script

4.4. CSS Modules

4.4.1 CSS file in the same folder of the component (component.module.css)

Ref: https://nextjs.org/learn/basics/assets-metadata-css/layout-component

Let's create these 2 files:
1) my-app/components/layout.module.css

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

2) Create the Layout component

import styles from './layout.module.css';

export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>;
}

Note the reference to the component in yellow. The CSS file name must end with .module.css

4.4.2 Global styles (called from my-app10/pages/_app.tsx)

Ref: https://nextjs.org/learn/basics/assets-metadata-css/global-styles

1) Create the CSS file my-app10/styles/globals.css and add the CSS code for all the elements in the application
2) Add the import of the file to the my-app10/pages/_app.tsx
import styles from '@/styles/globals.css';

4.4.3 Using clsx library 

Ref: https://nextjs.org/learn/basics/assets-metadata-css/styling-tips

This library lets you simplify code avoiding the use of className

4.4.4 Customizing PostCSS Config (file postcss.config.js)

To add the Tailwind CSS:

  • Install Tailwind CSS: npm install -D tailwindcss autoprefixer postcss
  • Create the files postcss,config.js and tailwind.config.js, and use the CSS classes
//file my-app10/postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

//==============================================

//file //file my-app10/tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4.4.5 Using Sass

You need to install Saas using

npm install -D sass






Comentarios

Publicar un comentario

Entradas populares de este blog

15. Next.js Tutorial (2). Fetching data. Async functions getStaticProps, getServerSideProps, getStaticPaths

Imagen
 1. Fetching data at the beginning of the application In the index.tsx (index.ts) you can use one of these 2 asyncfunctions: getStaticProps()  which works in client-side pre-rendering and the content is reused. So only one call is made, and it is made at build time . This is quicker. getServerSideProps()  that works on the server-side rendering and every call can produce different results as data changes. Use only if you need to render a page whose data must be fetched at request time such as authorization. //export async function getStaticProps() { / / only on pre-rendering export async function getServerSideProps ( ) { // only on server side rendering const allPostsData = getSortedPostsData ( ) ; return { props : { allPostsData , } , } ; } export default function Home ( { allPostsData } : { allPostsData : PostData [ ] } ) { return ( < Layout home > . . . . . . . Do not use API route inside getServ...
Leer más

10. React deployment on Nginx (5). Passing client certificate DN to react client

Imagen
 0. Nginx installation #------------------------------------------------------ # INSTALLATION # @see Mohammad Faisal #------------------------------------------------------ #1. Install nginx sudo apt-get update sudo apt-get install nginx #2. verify installation sudo nginx -v #------------------------------------------------------ # STARTUP SETTINGS #------------------------------------------------------ #start Nginx when server restarts sudo systemctl enable nginx #only for checking if nginx is running systemctl status nginx Now, change the local port (for instance to 8081) if you have another server (apache) in port 80 sudo nano /etc/nginx/sites-available/default ( OLD VERSIONS of NGINX !!! ) In newer versions of nginx use this file instead sudo nano /etc/nginx/conf.d/default.conf and edit the port from 80 to 8081 and also change the root from /var/www/html   to another folder like /home/ximo/my-react-app , but to avoid router probl...
Leer más