React, Next, Redux/▲ Next.js 검색 결과

해당 글 17건

FOUC, FOUT 문제를 해결해보자

styled components SSR로 FOUC(flash of unstyled content) 해결 이 문제는 SPA라서 발생하는 문제다. SSR 단계에서 스타일링을 내려주면 되면 해결된다. 뭘 사용하는 지에 따라 다르긴 한데 어쨌든 styled-components로 일단 해보자. Next에서 styled-components를 사용하면서 css가 적용되기 전에 먼저 html이 적용되는, 혹은 아예 적용이 안되는 경우가 있습니다. 이 경우 _document.js에서 직접 css를 SSR 방식으로 넣어주는 방식으로 해결할 수 있습니다. _document.js에 대한 설명은 생략하겠습니다. (https://nextjs.org/docs/advanced-features/custom-document) 아래 두 ..
React, Next, Redux/▲ Next.js 2021. 4. 29. 16:36

Next + Typescript (2) 기본 컴포넌트 타이핑

_app.tsx AppProps만 넣어주면 된다. 참고 ) nextjs.org/docs/basic-features/typescript#custom-app // import App from "next/app"; import type { AppProps /*, AppContext */ } from 'next/app' function MyApp({ Component, pageProps }: AppProps) { return } // Only uncomment this method if you have blocking data requirements for // every single page in your application. This disables the ability to // perform autom..
React, Next, Redux/▲ Next.js 2021. 2. 3. 23:08

Next + Typescript (1) tsconfig setting

@zeit/next-typescript를 사용하는 방법은 deprecated되었습니다. 공식문서 : nextjs.org/docs/basic-features/typescript Next Example도 참고합시다 : github.com/vercel/next.js/tree/canary/examples/with-typescript 우선 Next 프로젝트를 생성한 후 tsconfig.json을 생성한 뒤 실행시켜보려고하면... 때문에 해당 패키지들을 설치한 후 확장자를 tsx 꼴로 지정하시면 타입스크립트를 사용하실 수 있습니다. 주의하실점이, js였을 때는 확장자를 jsx로 하지 않아도 오류가 나지는 않았지만 ts를 사용하시게 된다면 확장자가 ts면 오류가 납니다. 우선, tsc --init으로 tsconfig..
React, Next, Redux/▲ Next.js 2021. 2. 3. 23:07

next/router event 감지 및 이를 활용한 page loader

github.com/vercel/next.js/tree/canary/examples/with-loading nextjs.org/docs/api-reference/next/router#routerevents next/router | Next.js Learn more about the API of the Next.js Router, and access the router instance in your page with the useRouter hook. nextjs.org 일반적으로 아래와 같이 useRouter를 이용해 앱 내의 이동을 구현했습니다. import { useRouter } from 'next/router' function Component() { const router = useRouter(..
React, Next, Redux/▲ Next.js 2020. 12. 10. 22:54

Image Optimization

nextjs.org/docs/basic-features/image-optimization Basic Features: Image Optimization | Next.js Next.js supports built-in image optimization, as well as third party loaders for Imgix, Cloudinary, and more! Learn more here. nextjs.org nextjs.org/docs/api-reference/next/image#related 10버전부터 Next.js에서는 Image 컴포넌트를 통해 이미지 최적화를 진행할 수 있게 되었습니다. html의 img 태그의 extension이며 사용자가 요청시에 최적화를 진행하기 때문에 빌드 타임이 증..
React, Next, Redux/▲ Next.js 2020. 12. 5. 00:28

Next 배포를 위한 준비(bundle-analyzer, tree shaking, gzip)

🚨 next 9.4 이상부터는 새롭게 환경변수를 추가하는 방법이 나왔습니다. nextjs.org/docs/basic-features/environment-variables dotenv 패키지를 설치할 필요 없이 .env.local 파일을 최상단에 생성한 후 환경 변수를 작성하시고, process.env.[이름] 꼴로 사용하시면 됩니다. 🚨 custom server를 만들어보려면 프론트 최상위 파일에 server.js를 만들고 아래의 지시를 따르면됩니다. 이 부분은 전에 다른 포스트에서도 다룬 바 있으니 참고합시다! nextjs.org/docs/advanced-features/custom-server darrengwon.tistory.com/539 1. next.config.js 구성과 bundle-ana..
React, Next, Redux/▲ Next.js 2020. 9. 19. 22:54

Next의 Pre-rendering, SSG와 SSR에 대한 설명

Pre rendering? nextjs.org/docs/basic-features/pages#pre-rendering By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript.(순수 React는 CSR을 하기 때문에 별도의 SSR 세팅을 해줘야 하는데 Next는 이를 자동으로 해준다) Pre-rendering can result in better performance and SEO. Each generated HTML is associated with minimal Ja..
React, Next, Redux/▲ Next.js 2020. 9. 9. 11:13

next Built-In CSS Support(css 모듈, Sass Support, etc)

Next는 별도의 웹팩 세팅을 하지 않아도 자체적으로 sass, css 모듈, tailwind 등을 지원하고 간단한 라이브러리 설치를 통해 less, stylus 등을 사용할 수도 있습니다. 문서를 통해 관련 코드를 살필 수 있습니다. Basic Features: Built-in CSS Support | Next.js Next.js supports including CSS files as Global CSS or CSS Modules, using `styled-jsx` for CSS-in-JS, or any other CSS-in-JS solution! Learn more here. nextjs.org css 모듈 Important: To use CSS Modules, the CSS file name m..
React, Next, Redux/▲ Next.js 2020. 9. 8. 22:16

Reusing the built-in error page (next/error)

Advanced Features: Custom Error Page | Next.js Override and extend the built-in Error page to handle custom errors. nextjs.org 아래와 같이 서버 사이드 쪽에서 데이터 페칭에서 발생 가능한 에러를 try/catch로 잡아서 다른 props를 반환하려고 했으나 오류를 냅니다. 최상위 스코프에서 return해야 한다는 규칙을 가지고 있는 듯 합니다. try/catch가 안 먹는다! export async function getServerSideProps(context) { let { nickname } = context.query; axios.defaults.baseURL = "http://127.0.0.1:5..
React, Next, Redux/▲ Next.js 2020. 8. 20. 15:08

next 다이나믹 라우팅과 우선순위

[] 대괄호를 붙여 동적 라우팅을 처리할 수 있다. 아래와 같은 페이지 구조가 있다면 /posts/3, /posts/5 등 동적인 라우팅에 대응할 수 있습니다. 위와 같은 파일 단위 [ ] 뿐만 아니라 폴더 단위 [ ]도 가능합니다. http://localhost:3000/posts/3 로 접속하면 3을 받아서 적당한 값을 처리하면 되겠죠. getInitialProps를 사용해서 context에서 꺼내 쓰면 됩니다. Post.getInitialProps = async (context) => { console.log(context.query); // output: { id: '3' } console.log(context.asPath); // output: /posts/3 console.log(context..
React, Next, Redux/▲ Next.js 2020. 8. 16. 20:25