Nextjs 및 Airtable을 사용하여 사이트 구축
프로젝트
우리는 세스 고딘 스타일의 블로그를 만들 것이다. 참조here.짧은 게시물이 홈 페이지에 표시됩니다.필기식 블로그.만약 당신이 블로그를 쓰고 싶지 않다면, 당신이 표시하고 싶은 다른 데이터를 선택하세요.Airtable의 데이터를 표시하는 것이 중요합니다.
왜 에어테이블이야?
Airtable는 추가 비트가 있는 스프레드시트 응용 프로그램입니다.그것은 설정하기 쉬워서 자신의 작은 프로젝트를 만들기에 매우 적합하다.백엔드를 학습하지 않고 자체 API를 생성합니다.Airtable에는 언제 어디서나 데이터베이스를 업데이트할 수 있는 모바일 응용 프로그램이 있습니다.
왜 Nextjs를 선택했습니까?
Nextjs를 사용하면 React를 정상적으로 작성할 수 있습니다.하지만 정적 사이트를 선택하여 속도와 SEO 개선을 향상시킬 수 있습니다.우리는nextjs의 정적 사이트 기능을 사용하여 구축할 때 사이트를 만들 것입니다.만약 네가nextjs의 초보라면 걱정하지 마라.이것은 매우 쉽게 할 수 있으며, 문법은 당신에게 매우 익숙합니다.
Airtable CMS 설정
우리는 우선 데이터가 필요하다.게시물을 추가할 데이터베이스를 만듭니다.
airtable.com로 이동하여 "base"를 생성합니다.
기본에서 테이블과 필드의 이름을 바꿉니다.나는 더 이상 번거로움을 피하기 위해 소문자로 사물을 명명하는 것을 더욱 좋아한다.
서식 있는 텍스트 형식이 활성화되어 있는지 확인합니다.목록, 제목 및 기타 텍스트 형식 옵션을 추가할 수 있습니다.
세 개의 가짜 게시물에 가상 데이터를 추가합시다.
봐라, 나는 나의 가상 게시물에 제목, 목록과 굵은 글자를 추가했다.이것은 우리의 응용 프로그램에서 포맷하기 위해서이다.우리는 가격 인하를 html로 전환할 것이다.
Nextjs 회사
터미널에서 명령
npx create-next-app your-project-name-here을 사용합니다.이것은 우리에게nextjs의 보일러판을 제공할 것이다.만약 네가 사용한 적이 있다면create-react-app, 이것은 매우 익숙할 것이다.너는 아주 좋은 출발점이 있다.텍스트 편집기에서 엽니다.VScode를 사용하고 있습니다.
index.js 폴더에 pages 파일이 있습니다.이것은 우리가 전시한 주요 내용이다.
터미널을 열다.위쪽 팁: VScode에 있는 경우 명령
ctrl ~을 사용하여 내부 터미널을 열거나 닫습니다.이 명령 npm run dev 은 서버에서 우리의nextjs 프로그램을 시작합니다.다음을
localhost:3000 에서 확인하십시오.
만약 네가 이것을 본다면, 너는 갈 수 있을 것이다.어떤 일을 하기 전에 코드를 정리하세요.api 폴더 및,style 삭제.모듈색인을 정리합니다.js 코드.내 모습은 이렇다.
import Head from 'next/head';
export default function Home() {
return (
<div>
<Head>
<title>Godin style blog demo</title>
<link rel='icon' href='/favicon.ico' />
</Head>
<main>
<h1>Godin style blog demo</h1>
</main>
</div>
);
}
Airtable API
우리는 우리의 기초를 우리의nextjs 응용 프로그램에 연결해야 한다.이동 airtable.com/api
다음 페이지가 표시됩니다.
당신이 사용하고 있는 기지로 들어가세요.거기서 공항, 훌륭한 의사를 발견할 수 있을 거예요.
우리가 관심 있는 부분은 JavaScript 탭의 인증 아래에 있습니다.
만약 이것이 너에게 낯설다면, 걱정하지 마라.우리는 우리의 요청을 완성하기 위해airtables npm 패키지를 사용할 것이다.계속
npm install airtable.비밀을 숨기다
우리 코드에서 디렉터리 맨 위에
.env 파일을 만듭니다.이것이 바로 우리가nextjs에 환경 변수를 숨긴 곳이다..env에 비밀을 추가합니다.AIRTABLE_API_KEY=YOUR_KEY_HERE
AIRTABLE_BASE_ID=YOUR_BASE_ID_HERE
AIRTABLE_TABLE_NAME=YOUR_TABLE_HERE
.env 가 .gitignore 에 추가되었는지 확인합니다.너는 Github에서 이런 것을 나누고 싶지 않다.중요 팁 - 환경 변수를 얻기 위해 서버를 다시 시작합니다.
데이터 가져오기
우리는 데이터를 얻는 데 사용할 파일을 만들 것입니다.
lib 폴더를 만들고 getPosts.js 파일을 만듭니다.이것이 바로 우리의airtable 코드가 데이터 획득을 처리하는 데 사용될 곳입니다.getPosts.js에 다음 코드를 추가합니다.코드는airtable에 연결되어 사용자가 제공한 베이스에서 기록을 가져옵니다.const Airtable = require('airtable');
const base = new Airtable({
apiKey: process.env.AIRTABLE_API_KEY,
}).base(process.env.AIRTABLE_BASE_ID);
const table = base(process.env.AIRTABLE_TABLE_NAME);
export default async function getPosts() {
const records = await table.select({}).all();
console.log(records);
return records;
}
getPosts() 의 index.js 함수를 호출합니다.터미널에서 대량의 정보를 볼 수 있습니다.이 데이터 폭격을 통해 당신은 볼 수 있습니다 fields.이것은 우리가 표시해야 할 데이터다.getPosts() 에서는 데이터를 축소하고 필요한 내용을 제공하는 데 사용할 두 개의 함수를 만들 것입니다.const Airtable = require('airtable');
const base = new Airtable({
apiKey: process.env.AIRTABLE_API_KEY,
}).base(process.env.AIRTABLE_BASE_ID);
const table = base(process.env.AIRTABLE_TABLE_NAME);
// maps over the records, calling minifyRecord, giving us required data
const getMinifiedRecords = records => {
return records.map(record => minifyRecord(record));
};
// gets the data we want and puts it into variables
const minifyRecord = record => {
return {
id: record.id,
fields: record.fields,
};
};
export default async function getPosts() {
const records = await table.select({}).all();
const minifiedRecords = await getMinifiedRecords(records);
console.log(minifiedRecords);
return minifiedRecords;
}
console.log.본문을 작성할 때 브라우저에서 API 키를 요청하는 오류가 발생했습니다.내용 표시
우리는 컨트롤러에 우리의 내용이 있다. 우리는 그것을 표시해야 한다.우리는nextjs의
getStaticProps() 내장 함수를 사용하여 구축할 때 내용을 얻을 것입니다.우리는
index.js 에서 이렇게 한다. 왜냐하면 이것은 우리가 보여주고 있는 페이지이기 때문이다.우리는 파일 밑에 getStaticProps() 함수를 추가했다.export async function getStaticProps() {
const posts = await getPosts();
return {
props: {
posts,
},
};
}
export default function Home({ posts }) {
import Head from 'next/head';
import getPosts from '../lib/getPosts';
export default function Home({ posts }) {
return (
<div>
<Head>
<title>Godin style blog demo</title>
<link rel='icon' href='/favicon.ico' />
</Head>
<main>
<h1>Godin style blog demo</h1>
<ul>
{posts.map(post => (
<li key={post.id}>
<h3>{post.fields.title}</h3>
<time>{post.fields.published}</time>
<div>{post.fields.content}</div>
</li>
))}
</ul>
</main>
</div>
);
}
export async function getStaticProps() {
const posts = await getPosts();
return {
props: {
posts,
},
};
}
우리는 한 가지 보충할 일이 필요하다
getStaticProps().이 데이터는 구축할 때 우리에게 제공되기 때문에, 이것은 우리가 새로운 게시물을 추가하면그것은 당신이 사이트를 재건할 때까지 추가되지 않을 것이다.그러나nextjs는 우리에게 이 문제를 해결하는 방법을 제공했다.revalidate: 1를 우리 함수에 추가해서nextjs가 새로 추가한 내용을 찾을 수 있도록 합니다.새 게시물을 추가하면Nextjs는 그것을 주울 것이다.추가된 숫자는nextjs 검사를 원하는 주파수입니다.너의 함수는 마땅히 이렇게 해야 한다.export async function getStaticProps() {
const posts = await getPosts();
return {
props: {
posts,
revalidate: 1,
},
};
}
텍스트 포맷
airtable의 포건 텍스트는 가격 인하로 우리에게 제공됩니다.DOM에서 "*", "#####"으로 표시됩니다.우리는 그것을 html로 바꾸기를 희망한다.
우리는 이를 위해 소프트웨어 패키지marked를 사용할 것이다.태그는 사용하기 쉽습니다.구성 요소 설치
npm install marked.다음 포장 가격 인하 내용은 marked() 함수에 표시되기를 희망합니다.index.jsimport marked from 'marked'에서 우리의 소포를 가져오십시오.<div>에 내용을 표시하기 전에.내용을 HTML 형식으로 표시하도록 변경합니다.사용dangerouslySetInnerHTML 및 우리post.fields.content를 marked()에 포장합니다.<div
dangerouslySetInnerHTML={{
__html: marked(post.fields.content),
}}
/>
import Head from 'next/head';
import marked from 'marked';
import getPosts from '../lib/getPosts';
export default function Home({ posts }) {
return (
<div>
<Head>
<title>Godin style blog demo</title>
<link rel='icon' href='/favicon.ico' />
</Head>
<main>
<h1>Godin style blog demo</h1>
<ul>
{posts.map(post => (
<li key={post.id}>
<h3>{post.fields.title}</h3>
<time>{post.fields.published}</time>
<div
dangerouslySetInnerHTML={{
__html: marked(post.fields.content),
}}
/>
</li>
))}
</ul>
</main>
</div>
);
}
export async function getStaticProps() {
const posts = await getPosts();
return {
props: {
posts,
revalidate: 1,
},
};
}
결론
우리는 세스 고딘 스타일의 사상 블로그를 세웠다.nextjs와 Airtable로 제작되었습니다.Airtable은 데이터베이스 템플릿 또는 CMS용으로 적합합니다.그것은 매우 강하다.
언제든지 Airtable 모바일 애플리케이션을 사용하여 CMS를 업데이트할 수 있습니다.
Nextjs는 다기능으로 읽을 수 있는 문법 때문에 정적 사이트에 매우 적합하다.graphQL 지식이 필요한 다른 프레임워크와는 다릅니다.
나는 몇 달 전에 Airtable을 API로 사용하는 것을 알고 싶다.백엔드나 적당한 데이터베이스가 필요 없이 아이디어를 전달하는 데 도움이 될 것이다.
여기서 어디로 갑니까
airtable +nextjs 프로젝트 아이디어 사용하기
airtable과nextjs를 사용하면 많은 일을 할 수 있습니다.그것들은 연습하기에 매우 적합하다.다음과 같은 몇 가지 방법으로 시작할 수 있습니다.
Nomad List 스타일 사이트
연결시켜달래요.
Reference
이 문제에 관하여(Nextjs 및 Airtable을 사용하여 사이트 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/davidbell_xyz/build-a-site-with-nextjs-and-airtable-25e1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
