나 다음부터.JS.

npx create-next-app nextjs-blog

영광입니다.json-pour-indiquer-qu'on-veut-etre-sous-Typescript(et j'installe-directment-Typescript)

touch tsconfig.json
yarn add --dev typescript @types/react

스위트룸 c'est parti pour installer et Initializer Tailwind:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

피셔 유니버설 호텔.css는 꼬리바람 스타일의 부조를 포함합니다.

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

J'aime bien les fichier 지수.js et 응용 프로그램제이슨.tsx(maisça ne change pas grand Choice)
임차인que l'initialis – t ion est faite, posons les bases de notre 블로그.
La premièreétape consisterédéfinir le type de l'article de blog,au sens Typescript.
공유된 파일에서 나는 과장하는 것을 싫어하는 사람을 만났다.d. 이것은 서로 다른 유형의 서비스입니다.나의 가설은 블로그 글의 작가 유형이 다르다는 것이다.이것은 아주 좋은 예이다. 너는 블로그에 글을 발표할 수 있다.

interface item {
  id: string|number;
  content: string;
};

interface BlogPost extends item {
  title: string;
}

블로그의 페이지에 이력서 한 부를 발표했는데, 이것은 과장된 색인이다.tsx,dans 유엔 파일 블로그/que jecrée dans/pages.당신의 블로그 글은 무엇입니까

// pages/blog/index.tsx

interface BlogPagesProps {
  blogs: Array<BlogPost>
}

const BlogPages:React.FC<BlogPagesProps> = ({blog}) => {
  return <>Blog Posts</>
}
export default BlogPages;

알론 체체 르콘트누스 알론 이스터지금, 우리는 유엔 문서의 내용을 토론하기 시작하고, 유엔 문서 블로그를 토론할 때/(이제, 우리는 당신의 관점이 정확하다고 가정하기 시작한다)
댓글 뭐 있나요?페트 디피니의 덴마크인 잡지에 페이지가 하나 있다.이것은 아주 좋은 선택이다.이것은 아주 좋은 예이다. 그것은 아주 좋은 예이다.전형적인 문제는 관련 내용 목록에서 적당한 답을 찾을 수 있다는 것이다. 이것은 좋은 예이다.이것은 사실이 아니다. 우리 모두는 변화무쌍한 가격(en.md)으로 파일 내용/블로그 등을 기록하고 있다.
신분 식별자(champ id)의 이름은 좋은 이름이고 블로그의 이름입니다.
작지 않은 꼬리는 좋은 예이다. 마지막 순간에 관한 이야기다.이 일은 매우 중요하다.이것은 전형적인 영화로 감독의 작품이며 전위적인 영화이다.
자유로운 존재: 회색
외부 재질: 실 첨가 재질
이것은 아주 좋은 예이다.
프랑스컵에서 나는 유엔의 답안지에 불을 붙이고 다시 소송을 제기했다.un 유형 de contenu 입니다.
버지니아의 변호사와 변호사에 대해 그는 유엔 문서에 다음과 같이 썼다.

async function _getAllData<T extends item>(directory: string): Promise<Array<T>> {
  // Get file names under folder
  const fileNames = fs.readdirSync(directory);
  return await Promise.all (fileNames.map(async fileName => {
    // Remove ".md" from file name to get id
    const id = fileName.replace(/\.md$/, '');

    // Read markdown file as string
    const fullPath = path.join(directory, fileName);
    const fileContents = fs.readFileSync(fullPath, 'utf8');

    // Use gray-matter to parse the post metadata section
    const matterResult = matter(fileContents);

    let content = matterResult.content;

    return {
      id,
      ...matterResult.data,
      content,
    } as unknown as T;
  }));

}

이것은'공장'이고 전문적인 공장이다.

export function makeGetters<T extends item> (directory: string) {

  return {
    getAllData: async () => _getAllData<T>(directory),
  };
}

crée la version spécifique pourle 블로그의 스위트룸:
crée un fichier/shares/blog에서그들은 간단하다고 허풍을 떨었다

import path from 'path';
import { makeGetters } from './content';

const directory = path.join(process.cwd(), 'content/blog');

export default makeGetters<BlogPost>(directory);

주요 세입자가 프랑스 사이트의 두 번째 페이지에 블로그 인덱스에 오르다

import BlogData from '../../shared/blog';

export async function getStaticProps() {
  const blogs = await BlogData.getAllData();

  return {
    props: {
      blogs,
    }
  };
}

interface BlogPagesProps {
  blogs: Array<BlogPost>
}

const BlogPages:React.FC<BlogPagesProps> = ({blogs}) => {
  return <><h1>Blog Posts</h1>
    {blogs.map((itm) => {
      return <><a key={itm.id}>{itm.title}</a><br/></>
    })}

  </>
}

Et on teste:wundershön
이것은 유럽연합 블로그에 관한 문장이다
크레 우은 피시르를 응원합니다.tsx dansle 파일 페이지/블로그
프랑스 국가통계국의 파트배 스위트룸
이것은 콧물벌레가 아니라 커피잔에서 당신의 미소를 볼 수 있기 때문에 좋은 선택이다.

async function _getItemData<T extends item> (directory: string, id: string, extended?: boolean): Promise<T> {

  const fullPath = path.join(directory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');

  // Use gray-matter to parse the post metadata section
  const matterResult = matter(fileContents);
  let content = matterResult.content;

  return {
    id,
    ...matterResult.data,
    content,
  } as unknown as T;
}

/* *** */

export function makeGetters<T extends item> (directory: string) {

  return {
    getItemData: async (id: string) => _getItemData<T>(directory, id),
    getAllData: async () => _getAllData<T>(directory),
  };

}

스위트룸

interface StaticRouteProps {
  params: {
    id: string;
  };
}

Et는 crée le get static props de la page에서 다음을 수행합니다.

interface PageProps {
  data: BlogPost;
}

export async function getStaticProps({params}:StaticRouteProps) {
  const data = await BlogData.getItemData(params.id);
  return {
    props: {
      data,
    }
  };
}

나는 작은 인물이다.이것은 활력이 넘치는 세계입니다. 활력이 넘치는 세계에서 당신은 이 모든 것을 마음껏 누릴 수 있습니다.이것은 새로운'get Static Paths'프로그램으로 내용이 풍부하다
쿠데타에 대한 재해석 내용:

const _getAllIds = (directory: string) => {
  const fileNames = fs.readdirSync(directory);

  return fileNames.map(fileName => {
    return {
      params: {
        id: fileName.replace(/\.md$/, '')
      }
    };
  });
};

/***/

export function makeGetters<T extends item> (directory: string) {

  return {
    getAllIds: () => _getAllIds(directory),
    getItemData: async (id: string) => _getItemData<T>(directory, id),
    getAllData: async () => _getAllData<T>(directory),
  };

}

한 공관이 댄슬에게 기금회에 관한 블로그를 보냈다

export async function getStaticPaths() {
  const paths = BlogData.getAllIds();
  return {
    paths,
    fallback: false
  };
}

전단지에는 공평한 전단지라고 쓰여 있다.
수입상의 책임자로서 tout en haut:

import Head from 'next/head';

파이낸셜타임스 페이지에서 다음을 수행합니다.

interface BlogPageProps {
  data: BlogPost;
}

const BlogPage: React.FC<BlogPageProps> = ({data}) => {

  return <>
    <Head> <title> {data.title} </title></Head>
    <main>
      <h1>{data.title}</h1>
      <div>
        {data.content}
      </div>
    </main>
  </>;
};

export default BlogPage;

집주인이곳은 조용한 곳이다!
Mettonsájour la page index du blog:

const BlogPages:React.FC<BlogPagesProps> = ({blogs}) => {
  return <><h1>Blog Posts</h1>
    {blogs.map((itm) => {
      return <><a key={itm.id} href={'/blog/'+itm.id}>{itm.title}</a><br/></>
    })}

  </>
}

테스트 etça marche mais에 대해서...토레스 모체입니다.Heureusement on peut améliorer tout ça avec Tailwind, en ajoutant le plugin "조판":

yarn add @tailwindcss/typography

미풍 위의 스위트룸.배치하다.js pour Rajele 플러그인:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography')],
}

이것은 당신의 스위트룸입니다. 네트와 보!

라주은 이미지

j'aimerais bien Rajune에게 공개된 사진Dans NextJS les images sont는 공용 파일을 검토했습니다.Donc je met l'image dans/public/blog
Je rajoute l'info dans le font matter:

---
title: "Tutorial Next.JS + Tailwind : créer un blog"
img: blog.jpg
---

이것은 나의 블로그다.이 사진은 인도의 사진이다.

interface item {
  id: string|number;
  content: string;
};

interface BlogPost extends item {
  title: string;
  img?: string;
}

문장의 마지막 페이지에 나의 이미지를 쓰고 결석한 상황에서 완전한 이미지 설명을 작성한다(그리고 내가 이미지에서 만난 상황:

const BlogPage: React.FC<BlogPageProps> = ({data}) => {

  return <>
    <Head> <title> {data.title} </title></Head>
    <main>

      <article className="prose lg:prose-xl mx-auto mt-12">
       <h1>{data.title}</h1>
        {data.img && <img src={'/blog/'+data.img} />}
        <ReactMarkdown>{data.content}</ReactMarkdown>
      </article>
    </main>
  </>;
};

봐라, 한 유엔 블로그에서 내가 말한 것은 아름다운 미래다.

Etape 끝: Rajour les méta 데이터

유엔 블로그의 글은 일종의 신앙이지 않습니까?이것은'원 데이터'에 관한 정보의 종합적인 글로 사회연구소의 자동차와 정보 형식을 포함한다.
다음에 만날 때 너는 태연자약해야 한다.
l'importe dans notre fichier[id]에 대한 설명입니다.tsx

import Head from 'next/head';

모든 것은 메타데이터의 구성 부분입니다: 제목, 이미지, 설명.2인용 시사회에서, 나는 트로이즈미다.두쿠프...블로그 글의 주제와 유형에 있어서'충실한 이미지'를 클릭하세요.rajoute les infos dans notre composant 호텔 스위트룸(ceux sous la forme'og: xxxx's sont le format Open Graphde 페이스북 mais ils sont aussi lus par Twitter)

const BlogPage: React.FC<BlogPageProps> = ({data}) => {

  /* ** etc. *** */

  return <>
    <Head> 
        <title> {data.title} </title>
        <meta 
            name="description" 
            content={data.description}>
        <meta 
            property="og:title" 
            content={data.title} 
        >
        <meta 
            property="og:description" 
            content={data.description}
        >
{ {data.img} && <meta 
            property="og:image" 
            content={data.img}
        >}

    </Head>
    <main>
    {/* *** etc. *** */}
    </main>
   </>;
}

좋다

봐라, 유엔 블로그 avec Next JS et Tailwind CSS에서mettre place의moyens de mettre 사이트에서 볼 수 있다.블로그 글 리스트의 페이지와 원칙 페이지의 공평한 페이지에서 다시 한 번 즐거운 시간을 보내시고, 글과 관련된 내비게이션 협의 없이 공평한 환경에서 정상적인 서비스를 누리실 수 있기를 바랍니다.n'hésitez pas vous avez des commentations ou des questions!